Vue.js object to json

Hello,

How could I get this to work?

 <div class="container">
        <data list="{{ $location->article()->toJson() }}"></data>
        <template id="ln-data">
            <ul>
                <li v-for="value in list">
                    @{{ value.name }}
                </li>
            </ul>
        </template>

        <script>
        Vue.config.debug = true;

        Vue.component('data', {
            template: '#ln-data',
            props:['list'],

            created() {
                this.list = JSON.parse(this.list);
            }
        })

        new Vue({
            el: 'body'
        });
        </script>

Controller:

$location = location::all();
return view('locationproducts')->with('location',$location);

Location model:

public function article()
{
    return $this->belongsToMany('App\article','article_location');
}

Error message:

ErrorException in Macroable.php line 81: Method article does not exist. (View: /home/vagrant/Code/project/resources/views/locationproducts.blade.php)

Thankyou.