Typical top-level component.

template.vue

<template>
<div>
	<breadcrumb 
    :breadcrumbs="this.breadcrumbs"
    :icon="'tag grey icon'"
    :discardbutton="{ 'name' : 'products.index' }"
    :savebutton="this.createProduct"
    :loading="this.dataLoading">
  </breadcrumb>

	<div class="ui grid container" v-if="dataLoading">
    <div class="sixteen wide column">
      <div class="ui segment" style="height:200px;">
        <div class="ui inverted dimmer" :class="{active: dataLoading}">
        <div class="ui text large loader">Loading</div>
        </div>
      </div>
    </div>
  </div>
	<!-- Actual Body Content with Cards !-->
	<div class="ui grid form container">
	  <!-- First Section !-->
	  <div class="sixteen wide computer sixteen wide tablet sixteen wide mobile column">
	    <div class="ui padded segment">
	      <!-- four wide and twelve wide columns till category & choose brands -->
	      <product-details 
	      	:product="product" 
	      	:brands="brands"
	      	:locations="locations" 
	      	:measures="measures"
	      	:suppliers="suppliers"
	      	:channels="channels"
	      	:taxes="taxes"
	      	:modifiers="modifiers"
	      	:categories="categories"
	      	:errors="errors"
	      	:colors="colors">
	      </product-details>

	      <product-inventory :product="product" :errors="errors"></product-inventory>

	      <product-variant :product="product" :taxes="taxes" :errors="errors"></product-variant>
	      <!-- sixteen wide column containing remaining form -->
	    </div>
	  </div>
	  <div class="sixteen wide right aligned column">
	    <router-link 
    		tag="a"
    		class="ui button" 
    		:to="{ name: 'products.index' }" exact>
    		Discard
    	</router-link>
    	<a class="ui primary button" :class="{ disabled : !product.name }" @click="createProduct" v-if="!this.id">Create</a>
	    <a class="ui primary button" @click="createProduct" v-if="this.id">Save</a>
	  </div>
	  <!--Container Tag Div !-->
	</div>
</div>
</template>
<script>
import productDetails from './partials/create/product-details.vue';
import productInventory from './partials/create/product-inventory.vue';
import productVariant from './partials/create/product-variant.vue';

export default {
	name: 'products-create',
	props: ['locations', 'measures', 'sections', 'brands', 'suppliers', 'channels', 'taxes', 'modifiers', 'categories'],
	components: {
		'product-details': productDetails,
		'product-inventory': productInventory,
		'product-variant': productVariant,
	},
	mounted() {
		let t = this;
		document.title = "ShopTreeApp :: Add New Product";
		t.dataLoading = true;
		setTimeout(function() { t.dataLoading = false }, 500);
	},
	data() {
		return {
			id: null,
			dataLoading: false,
			errors: {},
			breadcrumbs: [{ 'url': 'products.index', 'name': 'Products' }, { 'url': 'products.create', 'name': 'Add New Product' }],
			colors: [
				{"hex" : "#8E908F"},{"hex" : "#49AB47"}, {"hex" : "#E64946"}, {"hex" : "#359FC8"}, 
				{"hex" : "#785CB4"}, {"hex" : "#B77334"}, {"hex" : "#585858"}, {"hex" : "#ADD852"}
			],
			product: this.defaultProductParams(),
		}
	},
	methods: {
		create(formData) {
      return this.$http.post('/api/v2/products', formData);
    },
		redirectToIndex() {
      this.$router.push({ name: 'products.index' });
    },
		createProduct() {
			let t = this;
			let formData = t.formData();

			t.dataLoading = true;
			NProgress.start();
			t.create(formData)
        .then(response => {
        	t.id = response.data.id;
        	Vue.toasted.success('Product Added');
          t.$router.push({ name: 'products.show', params: { id: response.data.id } })
          t.dataLoading = false;
          NProgress.done(true);
        })
        .catch(error => {
        	console.log(error);
          if(error.response.data) {
              t.errors = error.response.data.errors;
              t.dataLoading = false;
              // t.redirectToIndex();
            }
          NProgress.done(true);
          Vue.toasted.error('Error Adding Product');
        });
		},
		defaultProductParams() {
			return {
				"id": null,
				"name": null,
				"description": null,
				"category_id": null,
				"brand_id": null,
				"image_id": null,
				"color_code": null,
				// not in ProductCreateRequest.php
				"enabled": true,
				// --------
				"options": [],
				"variants": [this.defaultVariantParams()],
				"locations": [],
				"sale_channels": []
			}
		},
		defaultVariantParams() {
			return {
				"id": null,
				"option_value_1": null,
				"option_value_2": null,
				"option_value_3": null,
				"sku": null,
				"barcode": null,
				"supplier_id": null,
				"image_id": null,
				"color_code": null,
				"modifier_set_id": null,
				"modifier_set_forced": false,
				"measure_type": null,
				"measure_value": 0,
				"cost_price": 0,
				"price": 0,
				"tax_id": null,
				"inventory_tracking": false,
				"inventory_allow_negative": false,
				"inventory_reorder_alert": 1,
				"inventory_reorder_quantity": 1,
				// not in ProductCreateRequest.php
				"variant_enabled": true
			}
		},
		formData() {
			return {
				"name": this.product.name,
				"description": this.product.description,
				"category_id": this.product.category_id,
				"brand_id": this.product.brand_id,
				"image_id": this.product.image_id,
				"color_code": this.product.color_code,
				"options": this.product.options,
				"variants": this.product.variants,
				"locations": this.product.locations,
				"sale_channels": this.product.sale_channels
			}
		}
	}
}
</script>