Best practice for implementing frontend using laravel and vue

I'm developing a large scale application base on Laravel 5.4. I'm wondering what is the best practice for implementing fronend for large scale application? Implementing on laravel blade for all styling and html rendering and using vue for interactivity or using blade to call vue components and implementing all stuff is vue? Let's see some examples:

This is first approach:

In laravel blade:

@extends('layout')
@section('content')
  <customer-search></customer-search>
  <customer-table></customer-table>
@endsection

then customer-search component would be:

<template>
  <div>
    <form action="/customer" method="GET">
      <input type="text" name="name" @input="updateValue($event.target.value)" :value="name" />
      <submit @click="search">Search</button>
    </form>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        name: '',
      }
    },
    methods: {
      search() {
        // Get data from server, update related data model for using in customer table, ...
      }
    }
  }
</script>

and customer-table component:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Access</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="customer in customers">
          <td></td>
          <td><a href="#">Link</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  export default {

  }
</script>

Second approach: blade:

@extends('layout')
@section('content')
  <customer-index>
    <form action="/customer" method="GET">
      <input type="text" name="name" @input="updateValue($event.target.value)" :value="name" />
      <submit @click="search">Search</button>
    </form>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Access</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="customer in customers">
          <td></td>
          <td><a href="#">Link</a></td>
        </tr>
      </tbody>
    </table>
  </customer-index>
@endsection

and customer-index component:

<tempalte>
  <div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        name: '',
      }
    },
    methods: {
      search() {
        // Get data from server, update related data model for using in customer table, ...
      },
      // Other methods, ...
    }
  }
</script>

Third possibility: Third possibility is try to using second approach and go more in depth on components. For example using a component for tables, a component for forms, a component for inputs, a component for buttons, ... Which one should i use to avid spending much time in fronend and also have a integrated frontend?

via Chebli Mohamed