'view' is undefined in Vue

Question

This is probably an easy fix but I've been struggling trying to get the 'view' and 'product' prop defined, both the 'product' (which should be an Object with the data) and 'view' props are being returned as undefined, but in the Events tab for Vue in Chrome, I can see that the data is being passed in via payload as an Object which all the correct data.

So I have a table that's populated with data, each row with an ID, once selected should take you to the edit page which you can see below, the data is being pulled but is not populating the form and was wondering whereabouts I am going wrong with this?

This is the form:

<template>
<div class="main-section">
<div class="details-form">
    <div class="details-form">
        <div>
            <label>Details:</label>
        </div>

        <div id="productPriority">
            <label for="productPriority">Priority: </label>
            <input id="productPriority" v-model="order" type="number" title="Product Priority" name="productPriority" placeholder="Please enter the product priority" required>
        </div>

        </div>
</div>
</div>
</template>

<script>
import {event} from '@/services';
import {http} from '@/services';
import {productStore} from '@/stores';

export default {
    name: "ProductDetails",

    props:['product', 'view'],

    data(){
        return{
            order:'',
            description:'',
            url: '',
            image_id: '',
        }
    },


    watch:{

        view() {
            if(this.view === 'product-details') {
                this.order = this.product[0].attributes.order;
                this.description = this.product[0].attributes.description;
                this.url = this.product[0].attributes.url;
                this.image_id = this.product[0].attributes.image_id;
            }
        },


        product: {
            hander: function() {

             if((this.product.length > 1) &&( this.product.attributes === "product")) {
                this.order = this.product.attributes.order;
                this.description = this.product.attributes.description;
                this.url = this.product.attributes.url;
                this.image_id = this.product.attributes.image_id;
            }

        }
        }
    }
}
</script>

Example of the data I am trying to pass:

"type": "product",
  "id": "1",
  "attributes": {
    "image_id": 1,
    "order": 1,
    "description": "abc",
    "url": "http://testingurl1.com"

The View page that the section is loaded from:

<product-badge-details v-show="subview === 'product-badge-details'" :product="product"/>

<script>
import {productStore} from '@/stores';
'@/components/products/ProductBadge';

export default {
    components: {ProductDetails},

    props:['subview', 'product'],

    data() {
        return {
            state: productStore.state,

        }
    },
}
</script>