Использование динамической реквизита vuejs в шаблоне блейда

Question

Я пытаюсь передать строку в компонент Vue, который я сделал.

<template>
    <div>
        {{selectedValue}}
        <v-date-picker
        mode='single'
        v-model='selectedValue'
        popover-visibility='focus'
        :input-props='{ class: "form-control", placeholder: null }'>
        </v-date-picker>
    </div>
</template>

<script>
import Vue from 'vue';
import { setupCalendar, Calendar} from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css';

setupCalendar({
    firstDayOfWeek: 1
});

export default {
    props: ['selectedValue'],
};
</script>

Затем в шаблоне блейда у меня есть это.

<date-picker :selectedValue="{{ $appointment->date}}" id="date-reported"></date-picker>

Когда я делаю это сдвоеточие как выше я получаю vue предупреждение, говорящее об ошибке компиляции шаблонаБез двоеточия я не получаю эту ошибку.но опора не определена.

Я пытался найти решение в Интернете, но не нашел ничего, что привело бы меня в правильном направлении.