Bladeの子のビューでスクリプトが反応しない

Question

前提・実現したいこと

PayjpをLaravelで実装しています。

以下のように、実装すると問題なくモーダルが開かれるんですが、

<div>
  {!! Form::open(['route' => 'payTest', 'method' => 'post']) !!}
  <script type="text/javascript" src="https://checkout.pay.jp/" class="payjp-button" data-key='公開鍵'></script>
  {!! Form::close() !!}
</div>

子ビューで同じようにスクリプトを埋め込むと、ボタンを押しても反応しなくなります。

@extends('layouts.app')

@section('content')
<div>
  {!! Form::open(['route' => 'payTest', 'method' => 'post']) !!}
  <script type="text/javascript" src="https://checkout.pay.jp/" class="payjp-button" data-key='公開鍵'></script>
  {!! Form::close() !!}
</div>
@endsection

解決方法があるのであれば、教えていただきたいのと、
みなさんはどのように実装されているのかを教えていただきたいです。

Comments

[mix-peach]

画面に表示されるのは、1ページ分のHTMLには変わりないので、子ビュー使ってるとかは関係ないと思いますよ。 他のjsで、エラーがでていませんか？？

[poteto4401]

Vueのエラーが出てまして、今回の件とは関係ないと思い込んでいました。どうやら、Vueを読み込んでいる範囲内で<script>タグを埋め込むのがだめみたいでした（理解力が乏しくうまく説明できずすみません）。助言いただきありがとうございました！

Answer 1

修正前

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

<div id="app">
  
  <main class="py-4">
    @yield('content')
  </main>
</div>

修正後

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

<div id="app">
</div> 

<main class="py-4">
  @yield('content')
</main>