title: Vuejs changing the selected target index to data from an array that pertains to the selection
body: <p>I am trying something different using vuejs, but i want to instead replace it with the nested array data instead of the selected text. As you can see, the selectedChar is displaying the name. Displaying the name there is fine, but in reality i would like to get the value of <strong>subjects</strong> there if that name is selected in the dropdown</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data: {
      todos: [
        { Name: 'DonaldDuck',dept:'Disney',subjects: ["DA_", "AS_1E1", "VV_123", "AP_DS1"] },
        { Name: "Sonic", dept:'Marvel',subjects: ["SA_", "KSL_111", "DD_123", "GP_1SA1"]},
  
      ],
      selectedChar:'null'
    },
    methods: {
          changeZ (event) {
   
   
         this.selectedChar = event.target.options[event.target.options.selectedIndex].text
         
         
        
      },
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;h2&gt;Todos:&lt;/h2&gt;
  &lt;select id="dept"class="form-control" @change="changeZ($event)" style="width: 210px;"&gt;
    &lt;option value="Select a Department" selected disabled&gt;select a character:&lt;/option&gt;
      &lt;option v-for="t in todos" :value="todos.id" :key="todos.id"&gt;{{ t.Name }}&lt;/option&gt;
  
  &lt;/select&gt;
  
   &lt;p&gt;&lt;span&gt;You Selected: {{ selectedChar  }}&lt;/span&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>instead. thanks!</p>