vue-component内のinput-textタグのvalueにBlade上の変数を入れる #Laravel

親コンポーネントから子コンポーネントへ単方向データバインディングさせる際、
v-modelディレクティブ名は

親側:ケバブケース (例:foo-bar)
子側:キャメルケース (例:fooBar)

で記述する必要がある(みたい)。

以下、サンプルコード。

/resources/js/components/SamplComponent.vue

<template>
    <div>
        <div class="input-group">
            <input type="text" class="form-control" name="text1" v-model="hoge">
        </div>
        ...(省略)
    </div>
</template>

<script>
export default {
    props: {
        inputVal: {
            type: String,
        }
    },
    data() {
        return {
            hoge: this.inputVal,    // プロパティのイミュータブル制約回避
            ...
        }
    },
    ...
}
</script>

/resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('sample-component', require('./components/SamplComponent.vue').default);

const app = new Vue({
    el: '#app',
});

$ npm run dev等でコンパイルし、

/resources/views/sample.blade.php

<body>
    <div id="app">
        ...
        <sample-component input-val="{{ old('hogehoge') }}"></sample-component>
　　　　　<!-- ↑例:oldヘルパーを使って入力値を保持 -->
        ...
    </div>
</body>