[Vuejs]-Change button text value from dropdown list on click event VueJS with TypeScript

I have created a pen for you which I believe does what you want but uses a <select> element instead of a button: https://codepen.io/xon5/pen/ewWqEa
Even if it doesn’t, I think you will find the methods there.

Template:

<div id="app">
  <select v-model="selectedOption" @change="showInterest">
    <option v-for="iOption in interestSortingOptions" :key="iOption.value" :value="iOption.value">{{iOption.label}}</option>
  </select>
  <p>Selected: {{interestsSelected.join(', ')}}</p>
</div>

Vue Object:

new Vue({
  el: "#app",
  data() {
    return {
      selectedOption: null,
      interestsSelected: [],
      interestSortingOptions: [
        {
          label: "Interested",
          value: "interested"
        },
        {
          label: "Scenario",
          value: "scenario"
        },
        {
          label: "Screening",
          value: "screening"
        },
        {
          label: "Offer",
          value: "offer"
        }
      ],
    interested: false
  };
},
methods: {
  showInterest() {
    this.interestsSelected.push(this.selectedOption);
    this.interestSortingOptions = this.interestSortingOptions.filter(v => {
      return v.value !== this.selectedOption;
    });
    this.selectedOption = null;
  }
}
});