Javascript Vue组件部分工作且不'；不能出现在Vue检查器中

我有一个非常简单的vue组件

<template>
  <div class="field has-addons">
      <div class="control is-expanded">
          <div class="select is-fullwidth">
              <select v-model="selected" @change="onChange($event)">
                  <option disabled value="">Select a list for Sync</option>
                  <option v-for="option in selectOptions" :value="option.id">{{option.name}}</option>
              </select>
          </div>
      </div>
      <div class="control">
          <a :href="syncUrl">
              <div class="button is-success">Sync</div>
          </a>
      </div>
  </div>
</template>
<style scoped>

</style>

<script>

  export default {
    props: {
      lists: String,
      training_id: String
    },

    mounted: function() {
      console.log('mounted');
    },

    computed: {
      syncUrl: function () {
        return "/admin/trainings/" + this.training_id + "/sync_list_to_training/" + this.selected
      }
    },

    data: function(){
      return {
        selectedList: '',
        selectOptions: '',
        selected: ''
      }
    },
    beforeMount() {
      this.selectOptions = JSON.parse(this.lists)
      this.inputName = this.name
    },

    methods: {
      onChange(event) {
            console.log(event.target.value)
        }
    }
  }
</script>

控制台中没有错误：vue devtools检测到vue v2.6.10

你能试试这个吗

另一个技巧是等待下一个滴答声：

---

这是从这里来的

我也尝试使用这个。。。但是这个值没有被选择。你能显示

console.log（'selectOptions'）

？@webprogrammer我添加了一个信息。。。标准的select示例也不起作用。PS：我在同一个应用程序上有其他组件，它们正在工作，我已经进行了更新。你能试试nextTick吗？你的应用程序包含在哪里？我更改了mount元素，现在它可以工作了

<template>
  <div class="field has-addons">
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selected }}</span>
  </div>
</template>
<style scoped>

</style>

<script>
export default {
  data: function(){
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}
</script>

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter)

import ActiveCampaign from '../../../application/components/active_campaign/ActiveCampaign.vue'

document.addEventListener('turbolinks:load', () => {
  const vueApp = new Vue({
    el: '#app-container',
    components: {
      'active_campaign': ActiveCampaign,
    },
  })
})

<input type="checkbox" v-model="myModel" @change="myFunction()">

myFunction: function() {
    var context = this;
    Vue.nextTick(function () {
        alert(context.myModel);
    }
}