VueJS / Laravel - Обмен реквизитом между Laravel и Vue

Question

Я определил компонент с именем EditorNavigation.vue следующим образом:

<template>
   <div>
   <ul>
      <li v-bind:class="{'is-active':(active === field.id)}" v-for="field in fields">
          <a :href="'/streams/' + stream_token + '/fields/' + field.id">{{field.name}}</a>
      </li>
   </ul>
   <div>
</template>

<script>
    export default {
        props: ["fields", "active", "stream_token"],
        created() {
            this.fields = JSON.parse(this.fields);
            this.active = JSON.parse(this.active);
            this.stream_token = JSON.parse(this.stream_token);
        }
    };

</script>

Как вы можете видеть в моем компоненте, мне нужны три переменные:

1. Поля (массив всех полей)
2. Уникальный токен для определенного ресурса
3. Текущий идентификатор активного поля (чтобы я мог установить класс is-active).

В моем файле вида Laravel я использую такой компонент:

show.blade.php

<editor-navigation fields="{{ json_encode($stream->fields) }}" active="{{ json_encode($field->id) }}" stream_token="{{ json_encode($field->stream->token) }}"></editor-navigation>

Таким образом, приведенный выше код работает нормально, однако он выглядит немного «грязно» - поскольку мне нужно использовать компонент editor-navigation на многих страницах, и мне интересно, что произойдет, как только мне понадобится другая переменная, отправленная на это - я должен обновить его во всех местах.