Laravel Facades in VueJS Template? - laravel-5.3

Question

I just created a symbolic link using this command php artisan storage:link to be able to access my files from the web. I've known this from Laravel's official docs: https://laravel.com/docs/5.3/filesystem#configuration.
And so I'm using <img src="{{ Storage::url($user->avatar) }}"> in my blade template to get the path of my image.
My question is, how can I achieve similar approach using VueJS Template?
I tried <img src="{{ Storage::url($user->avatar) }}"> in my .vue file but got an error when running gulp watch. The error throws an invalid expression. Simple means I can't use Laravel's Facades inside a .vue file?
What would be the best approach in getting the correct path of my image then? Use $avatar = Storage::url($user->avatar); and inject it to an array before getting it in .vue file?
For reference here's my:
VueJS File
<template>
<div class="row">
<div class="col-md-4" v-for="person in people">
<div class="panel panel-default">
<div class="panel-heading text-center">
{{ person.name }}
</div>
<div class="panel-body">
<img :src="person.avatar" class="img-responsive">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.$http.get('/people/')
.then((res) => {
console.log(res)
this.people = res.body.people
})
},
data() {
return {
people: '',
}
}
}
</script>
Route
Route::group(['prefix' => 'people', 'middleware' => ['auth']], function () {
Route::get('/', [
'uses' => 'PeopleController#index',
'as' => 'people',
]);
});
Controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class PeopleController extends Controller
{
public function index () {
$people = User::all();
return response()->json(['people' => $people]);
}
}

Answer 1

Why not set the storage path in your User model.
Create an avatar_url attribute in your model.
use Illuminate\Support\Facades\Storage;
class User extends Model {
protected $appends = ['avatar_url'];
....
public function getAvatarUrlAttribute() {
return Storage::url($this->avatar);
}
...
}
Then in your VueJS file...
<img :src="person.avatar_url" class="img-responsive">