Cacher is the code snippet organizer for pro developers

<template>
    <div id="product_list">
        <p>Original Price List</p>
        <ul>
            <li v-for='item in info' :key='item.index'>
                <b>{{item.product}}</b> @  $<i>{{item.price}}</i>/KG
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['info'],
    data(){
        return{}
    },
    computed:{},
    methods:{}
}
</script>

<style scoped>
    *{margin:0;padding:0;}

</style>

<template>
    <div id="sale_product_list">
        <p>Sale Product List</p>
        <ul>
            <li v-for='item in sale_info'>
                <b>{{item.product}}</b> @ $<i>{{item.price}}</i>/kg
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['sale_info'],
    data(){return{}},
    computed:{},
    methods:{}
}
</script>

<template>
  <div id="app">
    <product_list v-bind:info='product_list'></product_list>
    <sale_product_list v-bind:sale_info='sale_product_list'></sale_product_list>
  </div>
</template>
<script>
import product_list from '@/components/product_list.vue'
import sale_product_list from '@/components/sale_product_list.vue'
export default {
  name: 'app',
  components: {
    'product_list':product_list,
    'sale_product_list':sale_product_list
  },
  data() {
    return {
      product_list: [
        {
          product:'apple', price:5
        },
        {
          product:'peach', price:4
        },
        {
          product:'grape', price:6
        },
        {
          product:'orange', price:3
        }
      ]
    }
  },
  computed: {
    sale_product_list:function(){
      return this.product_list.map(function(item){
        return{
          product:item.product,
          price:item.price/2
        }
      })
    }
  }
}

</script>