How to get $el in petite vue - vue.js

Question

From the example inside the petite vue repo:
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
// exposed to all expressions
count: 0,
// getters
get plusOne() {
return this.count + 1
},
// methods
increment() {
this.count++
}
}).mount()
</script>
<div v-scope>
<p>{{ count }}</p>
<p>{{ plusOne }}</p>
<button #click="increment">increment</button>
</div>
When I am trying to get a p tag like so:
<p ref="foobar">{{ count }}</p>
This returns an error, since this.$refs.foobar is undefined:
increment() {
console.log(this.$refs.foobar.$el)
this.count++
}
How can I get the HTML element inside my javascript through $el?

Answer 1

Credits to #kissu for pointing me to the right discussion form, where I found the answer.
So apparently $refs only works inside of the "component" concept within petite vue.
If you have the following snippet, from the docs, with a ref added to the p tag:
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
function Counter(props) {
return {
count: props.initialCount,
inc() {
this.count++
},
mounted() {
console.log(`I'm mounted!`)
}
}
}
createApp({
Counter
}).mount()
</script>
<div v-scope="Counter({ initialCount: 1 })" #vue:mounted="mounted">
<p ref="foobar">{{ count }}</p>
<button #click="inc">increment</button>
</div>
You'll be able to do:
this.$refs.foobar from within that function, to get the element. Note: $el is not needed.