JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="app">
    <b>{{ message }}</b> is binding to message. <br/> <b>{{msgs[0]}}</b> is binding to msgs[0].
    <p>After load/refresh this page, If
      <ol>
        <li>you click Change_Message button alone, change of message reflect to DOM immediately.</li>
        <li>you click Change_Msgs[0] button alone, change of msgs[0] do not reflect to DOM at all.</li>
        <li>you click Change_Msgs[0] button followed by click Change_Message button, 
          both changes reflect to DOM immediately.</li>
      </ol>
    <p><button @click="changeMeaasge">Change_Message</button></p>
    <p><button @click="changeMsgs">Change_Msgs[0]</button></p>
    <p>I am curious about case 3, why change of message trigger updating of msg[0]?</p>
  </div>

JavaScript

var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        msgs: ['Hello React']
      },
      methods:{
        changeMeaasge(){
          this.message="message changed"
        },
        changeMsgs(){
          this.msgs[0]="msgs[0] changed"
        }
      }
    })