Vueファイル内のdataへのアクセス方法

Question

Vue-cliとNodeJSを用いて開発を行っています。

下記の様なVueファイルが大量にありボタンで遷移します。
ファイルをまたぐデータの共有はVuexで、１ファイルで完結するデータはdataに蓄える事にしようと考えました。そこで下記のように書きましたが上手くいきません。

Connection.vue

<template>
  <div>
    <section class="nes-container with-title">
      <h3 class="title">connection select</h3>
      <div class="nes-select">
        <select v-on:change="selectedEndpoint">
            <option value="" disabled="" selected="" hidden="">manual</option>
            <template v-for="(item, index) in endpoints">
              <option :key="index" :value="index">{{item.name}}</option>
            </template>
          </select>
      </div>
      <span>{{selectIndex}}</span>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Connection',
  data: function () {
    return {
      endpoints: [
        {
          name: 'localhost',
          protocol: 'http',
          url: '127.0.0.1:3000'
        },
        {
          name: 'official',
          protocol: 'https',
          url: 'good.com'
        }
      ],
      selectIndex: null
    }
  },
  methods: {
    selectedEndpoint: (event) => {
      let dom = event.target.options[event.target.options.selectedIndex]
      let selectIndex = Number(dom.value)
      this.selectIndex = selectIndex
    }
  }
}
</script>

<style scoped>
</style>

selectに操作が加わる度にselectedEndpoint()が呼ばれselectIndexの更新が行われるようにしたいと考えています。NodeJSを用いない開発(Vueファイルを用いずHtmlに書く)ではこのやり方で更新が上手くいくことは経験済みです。

どの様にしてselectIndexを更新してWeb表示に反映させればいいのでしょうか？
回答の方を宜しくお願いします。

Answer 1

https://teratail.com/questions/214916

methods: {
    selectedEndpoint: function (event) {
      let dom = event.target.options[event.target.options.selectedIndex]
      let selectIndex = Number(dom.value)
      this.selectIndex = selectIndex
    }
  }

アロー関数式から従来の関数式に変えれば良い。