How to access vanilla class instance stored from one Vue component in a parent component?

I have a parent component with 2 child components that both inherit from the same base component. (This parent component is being created and used in a Vue Storybook). Both SiblingAComponent and SiblingBComponent inherit the same BaseComponent, and instantiate the same inherited data classInstance, which is a vanilla JS class instance from another library. I am trying to access this classInstance from the parent component to pass as data into the second sibling component (in this case, from SiblingAComponent to SiblingBComponent), by using an reference siblingARef. However, I get this error from the storybook compiler:

too much recursion
isArguments@http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:49010:16
keys@http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:49073:28
_traverse@http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:119972:19
_traverse@http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:119974:28

ParentComponent Story:

storiesOf("ParentComponent Story", module)
    .addDecorator(
        withKnobs({
            escapeHTML: false
        })
    )
    .add("Passing data from A to B", () => ({
        name: 'ParentComponent',
        components: {
            SiblingAComponent,
            SiblingBComponent,
        },
        data() {
            return {
                siblingAData: [....], // array of objects
                siblingAOptions: {
                    axes: {},
                    height: "50px",
                },
                siblingBData: [...], // array of objects
                siblingBOptions: null,
            }
        },
        mounted() {
          const siblingAInstance = this.$refs.siblingARef.classInstance;

          const newOptions = {
            legend: {
                external: {
                    reference: siblingAInstance,
                },
            },
          };
       
         // this line is where I am getting an error
         this.siblingBOptions = legendExternal;
      },
      template: `
      <SiblingAComponent ref="siblingARef" :data="siblingAData" :options="siblingAOptions"/>
      <SiblingBComponent v-if="siblingBData" :data="siblingBData" :options="siblingBOptions"/>
      `,
}));

SiblingAComponent:

<template>
    <div class="sibling-a-component"></div>
</template>

<script>
import { ComponentA } from '@libraryexample/components';
import BaseComponent from './base-component.vue';

export default {
    name: 'SiblingAComponent',
    extends: BaseComponent,
    mounted() {
        this.classInstance = new ComponentA(this.$el, {
            data: this.data,
            options: this.options,
        });
    },
};
</script>

SiblingBComponent:

<template>
    <div class="sibling-b-component"></div>
</template>

<script>
import { ComponentB } from '@libraryexample/components';
import BaseComponent from './base-component.vue';

export default {
    name: 'SiblingBComponent',
    extends: BaseComponent,
    mounted() {
        this.classInstance = new ComponentB(this.$el, {
            data: this.data,
            options: this.options,
        });
    },
};
</script>

BaseComponent:

<script>
export default {
    name: 'BaseComponent',
    data() {
        return {
            classInstance: null,
        };
    },
    props: {
        data: { type: [Object, Array], required: true },
        options: { type: Object, required: true },
    },
};
</script>

Coming from the Angular and React worlds, using a reference to access a Vanilla class instance from another Component is nothing new, even if it's unconventional. I am new to Vue, so I am wondering why would trying to access a class instance fail (works fine for primitive data types) and give me such a weird error? Where is the recursion occurring?