Q: VueJS - Data and Method Scopes I have a Laravel Application and I'm routing through it to dynamically switch between Vue Components. For example:
Laravel Blade View 1 (template.blade.php)
...
<component is="@yield('vue')">
    @yield('content')
</component>
...

Laravel Blade View 2
@extends('template')

@section('vue', 'form-view');

@section('content')
    <form @submit.prevent="submitForm">
        <button type="submit">Submit Form</button>
    </form>
@stop

Vue Instance
import FormView from 'FormView';

new Vue({
    el: 'body',
    components: {
        FormView,
    },
});

FormView.js
export default {
    methods: {
        submitForm() {
            alert('hello');
        },
    },
};

The issue is that I get the following message in the console:
[Vue warn]: v-on:submit="submitForm" expects a function value, got undefined

Am I doing something wrong?

A: As the HTML in the view is not a Vue Template it is considered as inline and needs to be defined as an inline template:
...
<component is="@yield('vue')" inline-template>
    @yield('content')
</component>
...

