title: Vue js - Update index value doesn't update the second component's view
body: <p>I have this pretty simple Vue js page as below: </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="main-container"&gt;
              &lt;div id="contact-table"&gt;
                  &lt;table&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Contact Name&lt;/th&gt;
                              &lt;th&gt;Email&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody v-for="contact in contacts"&gt;
                          &lt;tr v-on:click="selectContact(contact.index)"&gt;
                              &lt;td&gt;
                                  {{contact.name}}
                              &lt;/td&gt;
                              &lt;td&gt;
                                  {{contact.email}}
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div id="contact-form"&gt;
                  &lt;input type="text" v-model="contactName"/&gt;
                  &lt;input type="text" v-model="contactEmail"/&gt;
                  &lt;button type="button" v-on:click="updateContact"&gt;Update Contact&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;script&gt;
          var hub = {
              contacts: [
                  {
                      name: "James",
                      email: "Jame@bond.com",
                      index: 0
                  },
                  {
                      name: "Mary",
                      email: "Mary@lamb.com",
                      index: 1
                  }
              ],
              index: 0
          };
  
          var contactTable = new Vue({
              el: "#contact-table",
              data: {
                  contacts: hub.contacts
              },
              methods: {
                  selectContact: function(index) {
                      hub.index = index;
                      console.log(hub.index);
                  }
              }
          });
  
          var contactForm = new Vue({
              el: "#contact-form",
              data: {
                  contactName: hub.contacts[hub.index].name,
                  contactEmail: hub.contacts[hub.index].email
              },
              methods: {
                  updateContact: function() {
                      hub.contacts[hub.index].name = this.contactName;
                      hub.contacts[hub.index].email = this.contactEmail;
                  }
              }
          });
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically it contains two Vue parts - the table and the input form. By clicking the row in the table it should change the value in the input form and but clicking the Update contact button it should update the form details. </p>
  
  <p>The second part is working well - however, when I clicked the table's row, although console.log tells me the hub.index is well updated, but the view in the input form is not. </p>
  
  <p>I believe this should be a two-way binding here so I am just wondering where did I do wrong here. </p>