better type system

src/types/ContractType.vue

@@ -1,15 +1,8 @@
 <script>
+import Customer from '@/types/CustomerType.vue';
 export default class Contract {
     no = "";
-    customer = {
+    customer = new Customer();
-        id: "",
-        acc_no: "",
-        name: "",
-        short_name: "",
-        at_risk: false,
-        address: {
-        }
-    };
     terms = "";
     products = [];
     start_date = new Date();

src/views/contracts/ContractEdit.vue

@@ -58,7 +58,7 @@
                 </template>
                 <v-row>
                     <v-col cols="4">
-                        <v-btn @click="contract.products.push({})" v-if="contract.products.length < 4">+ Add Product</v-btn>
+                        <v-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn>
                     </v-col>
                 </v-row>
                 <v-row>
@@ -93,6 +93,7 @@
 import axios from 'axios'
 import DatePicker from '@vuepic/vue-datepicker'
 import methods from '@/CommonMethods.vue'
+import Product from '@/types/ProductType.vue'
 export default {
     props: {
         setcontract: {}
@@ -142,6 +143,9 @@ export default {
         close() {
             this.$emit('closetab','list')
         },
+        addProduct() {
+            this.contract.products.push(new Product())
+        },
         async saveContract(){
             this.saving = true
             let url = this.$api_url + "/customers/contracts/" + this.contract.no + "/save"