Every object on your Vulcan charts is represented inside Components as a baseObject.

In order to use the baseObject inside of your custom component, you should first add it to your props.

baseObject: { type: Object }

If you don't want this to show up in the shortcode input when you publish the component, you can use the hidden option.

baseObject: { type: Object, hidden: true }

After this, you can use this.baseObject in your component code to read and update properties of the object from the component.

How is this useful, you ask? Having access to both the baseObject and the store make for a powerful combination.

Get the current co-ordinates of the object on the chart: const {x, y} = this.baseObject.position;

Get the current object size:

const { width, height } = this.baseObject.size;

Using the store actions, you might decide to update the object, such as its image:

Or how about adding some new lines of text in the Magic Editor?