Vue.js newly added element not reactive
<p>I created contenteditable like feature in my application. It works fine, I can edit and save the data but then I found out that newly added data cannot be edited using this feature. I use <code>obt.edited</code> parameter to activate edit mode. Even though I can set <code>obt.edited</code> for newly added element to TRUE but the form input don't show up. I have to refresh the page so that my contenteditable could work
Here is my vue.js code</p>

<pre><code>getData: function(page){
    this.$http.get("obat/getObat", function(data, status, response){
    this.$set('obat', data);
  })
},
editData: function(obat){
  obat.edited = true;
  obat.namaBeforeEdit = obat.nama;
},
doneEdit: function(obat,index){
  obat.edited = false;
  this.$http.post("obat/simpanObat", obat, function(data, status, response){
    this.obat[index] = obat;
  })
},
cancelEdit: function(obat){
  obat.edited = false;
},
</code></pre>

<p>Here is my controller code where I add <code>edited</code> attribute to each data I get from database</p>

<pre><code>public function getObat()
{
    $query = $this-&gt;obat_m-&gt;get(null,null,null);
    foreach ($query-&gt;result() as $row) {
        $data[] = array(
                    'id'    =&gt; $row-&gt;id_obat,
                    'nama'  =&gt; $row-&gt;nama,
                    'harga' =&gt; $row-&gt;harga,
                    'stok'  =&gt; $row-&gt;stok,
                    'edited'=&gt; false
                    );
    }

    echo json_encode($data);
}
</code></pre>

<p>Then here is my view</p>

<pre><code>&lt;tbody&gt;
              &lt;tr v-for="obt in obat" track-by="$index"&gt;
                &lt;td v-text="$index + 1"&gt;&lt;/td&gt;
                &lt;td v-if="!obt.edited"&gt;{{ obt.nama }}&lt;/td&gt;
                &lt;td v-if="obt.edited"&gt;&lt;input type="text" name="editNamaObat" v-model="obt.nama"&gt;&lt;/td&gt;
                &lt;td v-if="!obt.edited"&gt;{{ obt.harga }}&lt;/td&gt;
                &lt;td v-if="obt.edited"&gt;&lt;input type="text" name="editHargaObat" v-model="obt.harga"&gt;&lt;/td&gt;
                &lt;td v-if="!obt.edited"&gt;{{ obt.stok }}&lt;/td&gt;
                &lt;td v-if="obt.edited"&gt;&lt;input type="text" name="editStokObat" v-model="obt.stok"&gt;&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td class="text-center" v-if="obt.edited"&gt;
                   &lt;button type="button" class="btn btn-success" @click="doneEdit(obt, $index)"&gt;&lt;i class="fa fa-fw fa-hd"&gt;&lt;/i&gt; Save Changes&lt;/button&gt;
                    &lt;button type="button" class="btn btn-danger" @click="cancelEdit(obt)"&gt;&lt;i class="fa fa-fw fa-remove"&gt;&lt;/i&gt; Cancel Editing&lt;/button&gt;
                &lt;/td&gt;
                &lt;td class="text-center" v-if="!obt.edited"&gt;
                    &lt;button type="button" class="btn btn-success" @click="editData(obt)"&gt;&lt;i class="fa fa-fw fa-edit"&gt;&lt;/i&gt; Ubah&lt;/button&gt;
                    &lt;button type="button" class="btn btn-danger" @click="removeData(obt.nama, $index)"&gt;&lt;i class="fa fa-fw fa-remove"&gt;&lt;/i&gt; Hapus&lt;/button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
</code></pre>