laravel 5.6 - vue组件在刀片的扩展部分中呈现两次

In my latest laravel 5.6 project, I use vue and blade together. I have a situation that, if I put my vue component in extended blade.php file, that vue component will be rendered twice.

For example:

layouts/app.blade.php:

<div id="app">
...
<mobilesidebar></mobilesidebar>{{-- vue component --}}
...
</div>
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

stores/show.blade.php:

@extends('layouts.app')
@section('content')
...
<storelayout></storelayout>{{-- vue component --}}
...
@endsection

I will get:

but if i move storelayout to layouts/app.blade.php:

    <div id="app">
    ...
    <mobilesidebar></mobilesidebar>{{-- vue component --}}
    <storelayout></storelayout>{{-- vue component --}}
    ...
    </div>

Everything become normal.

I believe it has to do with app.js somehow call the render function twice.

How can I resolve this?