Props not linking with parent instance data

I have a "Product" component. The data from parent isn't passing to child. It stays set to default value entered from main template. Depending on premium value, shipping is free or costs 2,69.

I tried to understand using VueMastery introduction videos.. But i'm still struggling, can you please explain clear about what's the problem?

var app = new Vue({
    el: '#app',
    data: {
        premium: false // Changing the value here doesn't make any change
    }
})

Vue.component('product', {
    props: {
        premium: {
            type: Boolean,
            required: true
        }
    }, 
    template: ``,
    data() {},
    computed: {
        shipping() {
            if(this.premium) {
                return "Free";
            }
            return 2.69;
        }
    }
}

<div id="app">
    <product :premium="true"></product> // Changing this, it works..
</div

Thanks in advance.

You need to use the data from parent as binding source for product.

<div id="app">
 <product :premium="premium"></product>
</div> 

Changing data.premium in parent should now propagate to the child.