Info not displaying in modal, however no errors and Vue component works in console - laravel

Question

Looking to display data in a modal. My set up is as follows:
app.js
Vue.component('modal', require('./components/Modal.vue'));
const app = new Vue({
el: '#vue',
data() {
return {
id: '',
booking_start: '',
booking_end: '',
car: [],
user: []
};
},
});
Modal.vue component:
<template>
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
<script>
export default {
name: 'modal',
mounted() {
console.log('Modal mounted.')
},
data() {
return {}
},
props: ['id', 'booking_start', 'car', 'user'],
mounted() {
}
}
</script>
Laravel blade:
<div id="vue">
<modal v-bind="{{json_encode($reservation)}}">
<template slot="header">
<strong>Vehicle Checkout</strong>
</template>
<p>Ready to check out this vehicle?</p>
<table class="table table-sm">
<tr>
<th>Vehicle Name</th>
<td><span id="reservation-car-name">#{{ car.name }}</span></td>
</tr>
<tr>
<th>Vehicle Make / Model</th>
<td><span id="reservation-car-make-model"></span></td>
</tr>
<tr>
<th>Vehicle Registration</th>
<td><span id="reservation-car-registration"></span></td>
</tr>
<tr>
<th>Odometer Start</th>
<td><span id="reservation-car-odometer"></span></td>
</tr>
</table>
<template slot="footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Checkout</button>
</template>
</modal>
</div>
At this point, I am just attempting to get the data to show in the modal.
Looking at the Vue Dev tools:
There are no errors in the console, and I can output the data I am after in the console.
I'm probably missing something very basic as I am new to Vue, but I can't for the life of me work out what it is.

Answer 1

Component tag replaced by template content, so put all content into modal component from component tag <modal>.your content.</modal>
Vue.component('modal',{
props:['car'],
template: `<div><template slot="header">
<strong>Vehicle Checkout</strong>
</template>
<p>Ready to check out this vehicle?</p>
<table class="table table-sm">
<tr>
<th>Vehicle Name</th>
<td><span id="reservation-car-name">{{ car.name }}</span></td>
</tr>
<tr>
<th>Vehicle Make / Model</th>
<td><span id="reservation-car-make-model">{{ car.model }}</span></td>
</tr>
<tr>
<th>Vehicle Registration</th>
<td><span id="reservation-car-registration">{{ car.reg }}</span></td>
</tr>
<tr>
<th>Odometer Start</th>
<td><span id="reservation-car-odometer">{{ car.odo }}</span></td>
</tr>
</table>
<template slot="footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Checkout</button>
</template>
</div>`
})
const app = new Vue({
el: '#vue',
data() {
return {
id: '',
booking_start: '',
booking_end: '',
car: {name:'test1',model:'gh201',reg:'201821542',odo:'2018-01-01'},
user: []
};
},
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="vue">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<modal :car="car"></modal>
</div>
</div>
</div>
</div>
My other answers related this issue : router view and transition-group