Передача объекта реквизита компоненту Vue при сохранении свойств реагирующих

Question

Я использую Vue и Laravel.
Я пытаюсь определить объект измерения в базе данных, а затем передать значение через опору в компонент, сохраняя свойства объекта реактивными.

База данных содержит объект, определяющий определение имени и измерений. Измерения могут быть простыми значениями из магазина (как элемент 0) или расчетами по этим значениям (как элемент 1). Значения в хранилище задаются другими компонентами ввода формы на странице.

Таблица базы данных «элемент», столбец «размеры»:

"{
     0:  {name: 'item0',
          size: {
                x: 'this.storeState.h.dim',
                y: 'this.storeState.w.dim',
                z: 'this.storeState.d.dim'
          }
     },
     1:  {name: 'item1',
          size: {
                x: 'this.storeState.h.dim - this.storeState.offset1.dim',
                y: 'this.storeState.w.dim + this.storeState.offset2.dim',
                z: 'this.storeState.d.dim + 100'
          }
     }
 }"

Шаблон блейда laravel передает реквизиты компоненту vue. show.blade. php:

<my-component :dimensions="{{$item->dimensions}}">
</my-component>

Внутри my-component. Vue:

<script>
import { store } from "../../store.js";

export default {
    data() {
        return {
            storeState: store.state
        };
    },
    props: ["dimensions"],
    methods: {

        defineItems: function() {
            return this.dimensions; 
        }
</script>

Моя проблема в том, что свойства объекта поступают в виде строк и не являются реактивными , Я относительный новичок, и это может быть очевидно, но какую архитектуру использовать в этом случае? Я мог бы сохранить имена переменных в объекте (например, «h»), а затем пересоздать полное расположение переменной внутри компонента, но я не уверен, как обращаться со случаями, когда объект содержит вычисления с несколько переменных (как в пункте 2).

Работает, когда объект определен внутри компонента, но я хочу сделать компонент повторно используемым. Внутри my-component. Vue с локально определенным объектом:

<script>
import { store } from "../../store.js";

export default {
    data() {
        return {
            storeState: store.state
        };
    },
    methods: {

        defineItems: function() {
            var dimensions = {
            0: {
                name: "item0",
                size: {
                    x: this.storeState.h.dim,
                    y: this.storeState.w.dim,
                    z: this.storeState.d.dim
                }
            },
            1: {
                name: "item1",
                size: {
                    x: this.storeState.h.dim - this.storeState.offset1.dim,
                    y: this.storeState.w.dim + this.storeState.offset2.dim,
                    z: this.storeState.d.dim + 100
                }
            }
        };
        return dimensions; 
    }
</script>

Спасибо за любые ссылки на то, как вы подходите к этому ...

Answer 1

Я построил скрипку, чтобы понять, почему это не работает.
JSFiddle

В конце концов, это была проблема с моим шаблоном магазина, где магазин не работал существуют в экземпляре root Vue. Вот хранилище для экземпляра root из JSFiddle.

new Vue({
  el: "#app",
  data: {
    store: {
      x: 500,
      y: 400,
      z: 10
    }
  }
})