Использование пользовательских объектов модели в качестве поставщика v-for во Vue?

Question

Новичок в Vue - учусь, пока я исследую.

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

main.js

import Vue from "vue";

import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueKonva from "vue-konva";
Vue.use(VueKonva);

import RoomBuilder from "@/model/RoomBuilder";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
  data: () => ({
    roomBuilder: new RoomBuilder()
  })
}).$mount("#app");

Настраиваемый объект, который нельзя напрямую подключить к поставщику данных, - roomBuilder.

Затем в компоненте, в котором я хочу сослаться на этот объект, у меня есть этот код:

<template>
  <v-stage ref="stage" :config="stageSize">
    <v-layer>
      <v-rect ref="background" :config="backgroundConfig"></v-rect>
      <v-rect
        v-for="room in roomBuilder.getRooms()"
        :key="room.id"
        :config="room.config"
      ></v-rect>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  name: "RoomGrid",
  data() {
    return {
      stageSize: {
        width: 1000,
        height: 1000
      },
      backgroundConfig: {
        width: 50,
        height: 50,
        fill: "#2B2B2B"
      }
    };
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener("resize", this.fitStageIntoParentContainer);
      this.fitStageIntoParentContainer();
    });
  },
  methods: {
    fitStageIntoParentContainer() {
      const parentElement = this.$parent.$el;
      const background = this.$refs.background.getNode();
      background
        .setAttr("width", parentElement.clientWidth)
        .setAttr("height", parentElement.clientHeight);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>

Вот два POJO:

RoomBuilder.js

import Room from "@/model/Room";

class RoomBuilder {
  construct() {
    this.rooms = [new Room(1)];
  }

  drawOnto(konvaStage) {
    console.log(konvaStage);
  }

  getRooms() {
    return this.rooms;
  }
}

export default RoomBuilder;

а также

Room.js

class Room {
  construct(id) {
    this.id = id;
    this.config = {
      x: 10,
      y: 10,
      fill: "white",
      width: 10,
      height: 10
    };
  }
}

export default Room;

Спасибо, и полегче со мной. Обычно я работаю на стороне сервера! Я явно что-то неправильно подключил... пробовал

v-for="комната в этом. $data.roomBuilder.getRooms()"

v-for="комната в roomBuilder.getRooms()"

и т.п.

Очевидно, здесь творится какое-то волшебство, которого я не понимаю!

Спасибо!