JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://unpkg.com/vue'></script>

<div id='app'>
  <td class="countries-visible-filter">
    <visible-filter v-on:country-filter="clickEmited " :param='1'>All | </visible-filter>
    <visible-filter v-on:country-filter="clickEmited" :param='2'>Visible | </visible-filter>
    <visible-filter v-on:country-filter="clickEmited" :param='3'>Hidden</visible-filter>
  </td>
</div>

JavaScript

Vue.component('visible-filter', {
	props: ['param'],
  template: `
        <span class="text-muted"
            @click="countryTest"
        ><slot></slot></span>`,
  data: function() {
    return {
    }
  },
  methods: {
    countryTest() {
      var params = {
        countryId: 1,
        conutryName: 'Argentina',
        slotFilter: this.param
      }
      this.$emit('country-filter', params);
    }
  }
})

new Vue({
  el: '#app',
  methods: {
    clickEmited: function(params) {
      console.log('params: ' + JSON.stringify(params))
    }
  },
})