Vue 2 - Get Clossest Element With A Class

I am having the following in my template: @foreach ($countries as $country)

console.clear()

Vue.component("country",{
  props:["country"],
  template: "#country-template",
  data(){
    return {
      internalCountry: this.country
    }
  },
  methods:{
    updateCountry(){
      console.log(this.internalCountry)
    }
  }
})

letApp = newVue({

    el: '#app-container',

    data: {
      country:{
        name:"Germany",
        order: 1,
        show: true
      }
    },

    methods: {
        filterCountries() {

        },

        updateCountry(event) {
            console.log(event.target.parentElement);
        }
    }

})

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script><divid="app-container"><table><tbody><tris="country":country="country"></tr></tbody></table></div><templateid="country-template"><trclass="parent"><td><inputclass="form-control"type="text"v-model="internalCountry.name"></td><td>{{ internalCountry.show ? 'Yes' : 'No' }}</td><td><inputclass="form-control"type="number"v-model="internalCountry.order"></td><td><buttonclass="btn btn-primary">{{ internalCountry.show ? "Hide" : "Show" }}</button><buttonclass="btn btn-success" @click="updateCountry">Update</button></td></tr></template>

Your template would then become something like this

@foreach ($countries as $country)
    <tr is="country" :country="{{$country}}"></tr>
@endforeach

The individual countries are passed into the component as properties. Inside the component, the code uses v-model to bind the data to the internal country data so they are automatically updated. Then, when you need to do something in updateCountry you already have the values.