[Resuelto] ¿Cómo pasar data obtenida con Vue.js y Axios a la Vista?

Publicado hace 6 meses por diego-garcia

Estoy siguientdo dos tutoriales, el de "Roles y permisos" y el de crud en laravel con vuejs, decidí crear un proyecto en el cual he creado las rutas como se enseña en el tuto de "Roles y permisos" y el crud lo quiero hacer como se muestra en el tuto de "Crud en laravel con Vuejs", lo que he tengo es esto:

Mi ruta: Route::get('products', 'ProductController@index')->name('products.index')->middleware('permission:products.index');

El Controlador:

<?php
namespace App\Http\Controllers;
use App\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $products = Product::get();
        return $products;
    }

El Modelo:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    //
}

La Vista:

@extends('layouts.principal')

@section('content')

<div id="prod1" class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-sm-12">
        	<div class="card">
			  <h5 class="card-header">
			  	PRODUCTOS
			   	@can('products.create')
			   		<a href="{{ route('products.create') }}" class="btn btn-sm btn-primary float-right">Crear Nuevo Producto</a>
			  	@endcan
			</h5>
			  <div class="card-body">
			    <h5 class="card-title"> </h5>
			    <p class="card-text"> </p>		    
			  	   	<table class="table table-hover table-striped">
					  <thead>
					    <tr>
					      <th scope="col">#</th>
					      <th scope="col">Nombre</th>
					      <th scope="col">Descripción</th>
					      <th scope="col">Creado en:</th>
					      <th scope="col">Actualizado en:</th>
					      <th colspan="2"><center>Acciones</center></th>
					    </tr>
					  </thead>
					  <tbody>
					    <tr v-for = "product in products">
					      <th>@{{ product.id }}</th>
					      <td>@{{ product.name }}</td>
					      <td>@{{ product.description }}</td>
					      <td>@{{ product.created_at }}</td>
					      <td>@{{ product.updated_at }}</td>
					      <td width="10px"><a href="#" class="btn btn-warning btn-sm">Editar</a></td>
					      <td width="10px"><a href="#" class="btn btn-danger btn-sm">Eliminar</a></td>
					    </tr>
					  </tbody>
					</table>		   
			  </div>
			</div>            
        </div>
    </div>
</div>
@endsection

El código Vuejs:

new Vue({
	el: '#prod1',
	created: function(){
		this.getProducts();
	},
	data:{
		products: []
	},
	methods: {
		getProducts: function(){
			var urlProducts = 'products';
			axios.get(urlProducts).then(response => {
				this.products = response.data
			});
		}
	}
});

Esto me imprime en el navegador:

[{"id":1,"name":"Mollitia optio et sed aut ut doloremque et.","description":"Autem repellat earum nemo aut.","pricing":80,"totexist":66,"minexist":10,"created_at":"2018-08-06 02:22:10","updated_at":"2018-08-06 02:22:10"},{"id":2,"name":"Maiores consectetur earum modi aut adipisci ut explicabo temporibus.","description":"Molestias delectus porro quis enim.","pricing":34,"totexist":49,"minexist":11,"created_at":"2018-08-06 02:22:10","updated_at":"2018-08-06 02:22:10"}}]

He probado retornar en el controlador de ësta manera:

return view('products.index', compact($products));

pero sin resultados positivos, en la consola del navegador no me aparecen errores, ayuda por favor.