Returning a JSON instead of re-rendering the component with data binding

I've created a component to calculate a tip from an initial value in an input box, $amount in this case. I've started to use Livewire to learn about it, no problem with the install and config but when I've used a data binding to render $amount from the input box Laravel returns a JSON instead of re-rendering the component with the inserted value. Checking at the console it sends a POST and it returns a 200 code but when opening it shows a 419 error code. I'm using Bulma as CSS framework

TipCalculator.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class TipCalculator extends Component
{
    public $amount;
    public $percentage;
    public $tip;
    public $total;

    public function submit()
    {

    }

    public function render()
    {
        return view('livewire.tip-calculator');
    }
}

tip-calculator.blade.php

<div class="columns is-mobile is-centered">
    <div class="column is-half">
        <h1 class="title">Calculadora de propinas</h1>
        <form wire:submit.prevent="submit">
            {{ csrf_field() }}
            <div class="field">
                <label class="label">Ingrese monto a pagar</label>
                <div class="control">
                    <input class="input" wire:model="amount" type="text" placeholder="Monto a pagar">
                </div>
            </div>

            <div class="field">
                <label class="label">Ingrese porcentaje de propina</label>
                <div class="control">
                    <input class="input" type="text" placeholder="Porcentage de propina">
                </div>
            </div>

            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">Total Propina</label>
                        <div class="control">
                            <input class="input" type="text" placeholder="Propina" readonly>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Total a pagar</label>
                        <div class="control">
                            <input class="input" type="text" placeholder="Total" readonly>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<p>{{ $amount }}</p>

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <livewire:styles>
    </head>
    <body>
        <div class="container">
            <livewire:tip-calculator />
        </div>
        <livewire:scripts>
    </body>
</html>

Solution

Problem solved!

Like ReactJS and VueJS the view must be wrapped inside a to be rendered by the DOM. So, the tip-calculator.blade.php must be

<div class="columns is-mobile is-centered">
    {{-- All the code to be rendered --}}
    <p>{{ $amount }}</p>
</div>