Check Klaro consent with vue.js before enabling any tracking

Question

I have created a page with Vue and the Jamstack Gridsome.

Now I wanted to include the Klaro Consent Tool, but I'm stuck here. I have installed it as a plugin via Node, it also works partially (on the first call of the page, or via link on the page) but the updating and reading of the values does not work as I would like. I am a beginner in JS / Vue and can't get any further. Maybe there is someone in this forum who can give me a tip how to solve this problem.

This is the plugin:

https://gridsome.org/plugins/klaro-gridsome

(I have manually updated the klaro script of the plugin version to the latest version)

This is the Consent Manager:

heyklaro.com

The plugin is included in gridsome.config.js. The call to klaro is made in the default.vue:

<a href="https://codepen.io/ginkoQ/project/editor/XoqNLz">codepen</a>

 mounted() {
    console.log(klaro);

    let consentUpdate;
    // klaro.setup(klaroConfig);
    consentUpdate = window.klaro.getManager().consents;

    console.log(consentUpdate);
  },

};

The first time you visit the page, the Consent Manager appears. You can select and decide for or against a video. A cookie is set with the correct information and the video is not displayed, for example. If I now look at other pages and then return, the video is visible. Here the cookie is not read and applied again.

And here is my thinking error 🙂 -> I would have to tell Vue that every time it encounters the video, the website first queries the cookies whether it is allowed.

If I now call the Consent Manager again (via a link on the page), the cookie is read and the, in this case, video is deleted and the place is provided with a query. I have a knot in my head and hope you can help me. Thanks in advance