タグ入力欄だけVue化

resources/views/ejaculation/edit.blade.php

@@ -3,7 +3,7 @@
 @section('title', 'チェックインの修正')
 
 @section('content')
-<div class="container">
+<div id="app" class="container">
     <h2>チェックインの修正</h2>
     <hr>
     <div class="row justify-content-center mt-5">
@@ -41,10 +41,7 @@
                     <div class="form-group col-sm-12">
                         <input name="tags" type="hidden" value="{{ old('tags') ?? $ejaculation->textTags() }}">
                         <label for="tagInput"><span class="oi oi-tags"></span> タグ</label>
-                        <div class="form-control h-auto {{ $errors->has('tags') ? ' is-invalid' : '' }}">
-                            <ul id="tags" class="list-inline d-inline"></ul>
-                            <input id="tagInput" type="text" style="outline: 0; border: 0;">
-                        </div>
+                        <tag-input id="tagInput" input="tags" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
                         <small class="form-text text-muted">
                             Tab, Enter, 半角スペースのいずれかで入力確定します。
                         </small>