SOURCE

new Vue({
        el:"#navTab",
        data:{
            action:"apple",
            products:[
                    {name:"apple",active:true},
                    {name:"banana",active:false},
                    {name:"orange",active:false},
                    {name:"bread",active:false}
                ],
            productsTab:[
                {name:"apple",price:"11",active:true},
                {name:"banana",price:"22",active:false},
                {name:"orange",price:"33",active:false},
                {name:"bread",price:"44",active:false}
            ],
        },

        methods:{
            tab:function(product){
                for(var i =0; i<this.productsTab.length;i++){
                    this.productsTab[i].active=false;
                }
                product.active = true;
            },
            addProduct:function(product){
                this.action =product.name;
                for(var i =0; i<this.products.length;i++){
                    this.products[i].active=false;
                }
                product.active = true;
            }
        }
    })

<div class="container">
        <div id="navTab" class="box">
            <ul class="productList">
                <li v-for="(product,index) in products"
                    :class="product.active && 'active'"
                    @click="addProduct(product)">{{product.name}}</li>
            </ul>
            <div> change {{action}}</div>
            <div class="tab">
                <ul class="productList">
                    <li v-for="(product,index) in productsTab"
                        :class="product.active && 'active'"
                        @click="tab(product)">{{product.name}}</li>
                </ul>
                <ul class="tabContent">
                    <li v-for="(product,index) in productsTab"
                        :class="product.active && 'active'">{{product.price}}</li>
                </ul>
            </div>
        </div>
    </div>

ul{padding: 0;list-style: none;margin: 0;overflow: hidden}
        .box{width: 400px;margin: auto}

        .box  ul{background: #5597b4}
        .box .productList li{width:100px;float: left;line-height: 30px;text-align: center;font-size: 18px;color:#FFFFFF}
        .box .productList li.active{background:#e35885}

        .box .tabContent{}
        .box .tabContent li{display: none}
        .box .tabContent li.active{display: block}