Access or modify data outside of app in petite-vue

[djave-co]

I'm using petite-vue as I need to do very basic UI updates in a webpage and have been drawn to its filesize and simplicity. I'd like to control the UI's state of visible / invisible DOM elements and class names and styles of various elements.

I have multiple JavaScript files in my app, I'd like to be able to make these changes from any of them.

In Vue JS it was possible to do things like this...

const vueApp = new Vue({ el: "#vue-app", data(){
  return { count: 1}
}})

setTimeout(() => { vueApp.count = 2 }, 1000)

I'm trying the same with Petite Vue but it does nothing.

// Petite Vue
const petiteVueApp = PetiteVue.createApp({
  count: 0,
}).mount("#petite-vue");

setTimeout(() => { petiteVueApp.count = 2 }, 1000);

Logging the app gives just a directive and mount attribute, I can't find the count.

Demo:
https://codepen.io/EightArmsHQ/pen/YzemBVB

Is this just impossible? I have an app with hundreds of JavaScript files, and I'd like to modify the UI state from any of them, so ideally I'd like to do something like:

import PetiteUI from "./PetiteVueInit.js"

const someMethod = () => {
  PetiteUI.count ++;
}

...and then have my UI update on the page.

[djave-co]

I overlooked this in the docs, the trick is to import @vue/reactivity — 

https://github.com/vuejs/petite-vue#global-state-management

Updated example

https://codepen.io/EightArmsHQ/pen/ExEYYXQ