JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.js"></script>
<div id="app">
  <keep-alive>
    <component :is="currentView"></component>
  </keep-alive>
</div>

CSS

.link {
  cursor: pointer;
  text-decoration: underline;
}

JavaScript

const store = new Vuex.Store({
  state: {
    selectedProduct: null
  },
  getters: {
    selectedProduct: state => state.selectedProduct
  },
  mutations: {
    selectProduct: (state, data) => state.selectedProduct = data
  }
});

Vue.component('list-products', {
  store,
  template: `<div>
      Select product:
      <div v-for="product in products" @click="selectProduct(product)" class="link">
        {{product.name}}
      </div>
    </div>`,
  data() {
    return {
      products: [{ name: 'product1' }, { name: 'product2' }]
    };
  },
  methods: {
    selectProduct(product) {
      this.$store.commit('selectProduct', product);
    }
  }
});

Vue.component('edit-product', {
  store,
  template: `<div>
      <div v-if="selectedProduct">Edit product: {{selectedProduct.name}}</div>
      <div @click="reset()" class="link">Reset</div>
    </div>`,
  computed: Vuex.mapGetters(['selectedProduct']),
  methods: {
    reset() {
      this.$store.commit('selectProduct', null);
    }
  }
});

new Vue({
  el: '#app',
  store,
  computed: Object.assign(Vuex.mapGetters(['selectedProduct']), {
    currentView() {
      return this.selectedProduct ? 'edit-product' : 'list-products'
    }
  })
});