How can we use the "name" or "id" attribute values as the data property in Vue JS?

I am working on an SPA application where I have a list of data variables that are used as the <option> tags in the dropdown. I want to navigate to another page on the @change event of the dropdown therefore I want to use either the id or name of the select command as the name of the data property. Here is what I mean:

Here is what I have in the data function:

data(){
  return {
      participants: [
          { value: 0, linkText: '', linkTerm: 'Select' },
          { value: 1, linkText: '/meetings/participants/create', linkTerm: 'Add New' },
          { value: 2, linkText: '/meetings/participants', linkTerm: 'All Participants' },
      ],
      positions: [
          { value: 0, linkText: '', linkTerm: 'Select' },
          { value: 1, linkText: '/meetings/positions/create', linkTerm: 'Add New' },
          { value: 2, linkText: '/meetings/positions', linkTerm: 'All Positions' },
      ],

  }
}    

Here is the select tag where I use the above data variables as the <option> tag:

<select name="participants" id="participants" class="select-field" @change="changeRoute($event)">
  <option v-for="p in participants" :value="p.value">{{ p.linkTerm }}</option>
</select>  

Now I want to have one function changeRoute($event) from which I will navigate to different pages, therefore I want to use the id or name value as the data property, here is the function:

methods:{
    changeRoute($event){
        var name = $event.target.name;
        var value = document.getElementById($event.target.id).value;
    }
}  

Here in the above function I want to use the name as the data property as below:

I want to write this:  
this.name[value].linkText;

And because name here is the name of the tag which is actually participants so the above line of code should mean something like this:

this.participants[value].linkText  

And that should return the linkText of the participants object of the data function.

Any help is appreciated in advance.