Vue JS computed property is not triggered With this markup

```
<!-- language: lang-html -->
<p>£{{plant_price}}</p>

    <div v-if="selected.plant.variations.length > 0 ">
      <select v-model="selected.plant.selected_variation" class="form-control">
        <!-- inline object literal -->
        <option v-for="(variation, i) in selected.plant.variations" :selected="variation.id == selected.plant.selected_variation ? 'selected' : ''":value="variation.id">
          {{variation.name}}
        </option>
      </select>
    </div>

```

---

```
<!-- language: lang-js -->
var app = new Vue({
  el: '#vueApp',
  data: {
    selected: {
      type: {a: '' , b: ''},
      vehicle: '',
      plant: {
      }
    },
  computed: {
plant_price: function() {
  if (this.selected.plant.variations.length > 0 ) {
      var variant = _.find(this.selected.plant.variations, {id: this.selected.plant.selected_variation });
      return variant.price;
  } else {
    return this.selected.plant.price;
  }
}
...

```

`selected.plant` is populated by clicking on a plant - triggering the updateSelected method.

```
<div class="col-sm-4" v-for="(plant, i) in step2.plants">
          <div v-on:click="updateSelected(plant)" ....

 methods: {
      updateSelected: function(plant) {
             this.selected.plant = plant; // selected plant
             if (this.selected.plant.variations.length > 0 ) {
                 this.selected.plant.selected_variation = this.selected.plant.variations[0].id; // set the selected ID to the 1st variation

```

I have checked through the debugger, and can see that all the correct properties are available. 

```
selected:Object
    type:Object
    vehicle: "Truck"
    plant:Object
       id:26
       price:"52"
       regular_price:"100"
       selected_variation:421
       variations:Array[2]
          0:Object
              id:420
              name:"small"
              price:52000
              regular_price:52000
          1:Object
               etc...

```

I have a computed property, which should update the `plant_price` based on the value of `selected.plant.selected_variation`.

I grab `selected.plant.selected_variation` and search through the variations to retrieve the price. If no variation exists, then the plant price is given.

I have a method on each product to update the selected plant. Clicking the product populates the selected.plant and triggers the computed plant\_price to update the price (as the value of selected.plant.selected\_variation has changed).

However, the computed plant\_price is not triggered by the select. Selecting a new variant does what its supposed to, it updates selected.plant.selected\_variation. Yet my plant\_price doesn't seem to be triggered by it.

---

So I refactored my code by un-nesting selected.plant.selected\_variation. I now hang it off the data object as 

```
data = {
    selected_variation: ''
    }

```

and alter my computer property to reference the data as this.selected\_variation. My computed property now works??? This makes no sense to me?