vue components doesn't show data in laravel blade - php

Question

i have a problem with the vue components.
here's the code from add.blade.php
<div class="col-md-5">
<h4>Detail Produk</h4>
<div v-if="product.name">
<table class="table table-stripped">
<tr>
<th>Kode</th>
<td>:</td>
<td> #{{product.code}}! </td>
</tr>
<tr>
<th width="3%">Produk</th>
<td width="2%">:</td>
<td> #{{product.name}}! </td>
</tr>
<tr>
<th>Harga</th>
<td>:</td>
<td> #{{product.price | currency}} </td>
</tr>
here's the code from transaksi.js
el: '#dw',
data: {
product: {
id: '',
price: '',
name: '',
photo: ''
},
here's the result from add.blade.php
update :
here's the full code of section #dw in add.blade.php
<section class="content" id="dw">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<x-card>
#slot('title')
#endslot
​
<div class="row">
<div class="col-md-4">
<form action="#" #submit.prevent="addToCart" method="post">
<div class="form-group">
<label for="">Produk</label>
<select name="product_id" id="product_id" v-model="cart.product_id" class="form-control" required width="100%">
<option value="">Pilih</option>
#foreach ($products as $product)
<option value="{{ $product->id }}">{{ $product->code }} - {{ $product->name }}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="">Qty</label>
<input type="number" name="qty" v-model="cart.qty" id="qty" value="1" min="1" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-primary btn-sm" :disabled="submitCart">
<i class="fa fa-shopping-cart"></i>#{{ submitCart ? 'Loading...':'Ke Keranjang' }}
</button>
</div>
</form>
</div>
<div class="col-md-5">
<h4>Detail Produk</h4>
<div v-if="product.name">
<table class="table table-stripped">
<tr>
<th>Kode</th>
<td>:</td>
<td> #{{product.code}}! </td>
</tr>
<tr>
<th width="3%">Produk</th>
<td width="2%">:</td>
<td> #{{product.name}}! </td>
</tr>
<tr>
<th>Harga</th>
<td>:</td>
<td> #{{product.price | currency}} </td>
</tr>
</table>
</div>
</div>
<div class="col-md-3" v-if="product.photo">
<img :src="'/uploads/product/' + product.photo" height="150px" width="150px" :alt="product.name">
</div>
</div>
#slot('footer')
​
#endslot
</x-card>
</div>
#include('orders.cart')
</div>
</div>
</section>