title: VusJS DOM update, when a a new value is selected from dropdown
body: <p>I am trying to update DOM by the following logic but it's not working,</p>
  
  <p>index.vue    [Template part]</p>
  
  <pre><code>&lt;div&gt;
       &lt;div v-for="obj in objects" :key="obj.id"&gt;
             &lt;select v-model="obj.quantity" @change="qtyChange(obj)"&gt;
                &lt;option value="1"&gt;1&lt;/option&gt;
                &lt;option value="2"&gt;2&lt;/option&gt;
                &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;/select&gt;
  
          &lt;div class="w-1/5"&gt;
            &lt;p class=" pt-4 text-right"&gt;${{ getObjectPrice(obj) }}&lt;/p&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>index.vue    [Script part]</p>
  
  <pre><code>  &lt;script&gt;
           props['selectedObjs'],
           data () {
                 return {
                     objects: []
                 }
           },
           mounted: {
                        this.objects = this.selectedObjs
                    },
           methods: {
                       getObjectPrice(obj)
                            {
                                  // some mathematical calculations
                                  // obj.quantity is used in multiplication
                                  return answer
                            },
  
                       qtyChange(obj) {
                                     getObjectPrice(obj)
                       }
                    }
    &lt;/script&gt;
  </code></pre>
  
  <p>I have tried to watch the objects data property but it is not working, I have to show the updated price of objects based on the quantity selected from the dropdown. if anyone can suggest me a good solution.</p>