HTMLファイル内に記述したVueコンポーネントより下に記述した要素が表示されない原因を教えてください

Question

問題

表題のとおりです。
Vueファイルの記述に問題があると予想はしているのですが、どこに誤りがあるのかわからないです。

ソースコード

sample.blade.php

<div class="col-md-12">
  <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
    <label class="col-form-label" for="input-name">名前</label>
    <input class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name"
      id="input-name" type="text" value="{{ old('name') }}" required="true" aria-required="true" />
  </div>
</div>

<furigana-component /> // ここより下の要素が表示されない

<div class="col-md-12">
  <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
    <label class="col-form-label" for="input-email">メールアドレス</label>
    <input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email"
      id="input-email" type="email" value="{{ old('email') }}" required="true" aria-required="true" />
  </div>
</div>

app.js

window.Vue = require('vue');

Vue.component('furigana-component', require('./FuriganaComponent').default);

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

FuriganaComponent.vue

<template>
  <div>
    <sample1-component />
    <sample2-component />
  </div>
</template>

//...

Answer 1

コンポーネントの記述を次のように修正したら治りました。

before

<furigana-component />

after

<furigana-component></furigana-component>