$persist in re-usable components

[su8898]

How do we register a variable as a $persist value inside re-usable components?

For example, the following code will return an error that says $persist is not defined. The 'this (as in this.$refs etc) keyword will not work on Top-level either.

    Alpine.data('dropdown', () => ({
        open: $persist(false),

        toggle() {
            this.open = !this.open
        },
    }))
})```

[SimoTod]

If you want to use this at the top level, you need to use a standard function.
Alpine needs to bind a custom this to make magics available at the top level and in javascript is not possible to re-bind this for arrow functions.

Alpine.data('dropdown', function() {
    return {
        open: $persist(false),

        toggle() {
            this.open = !this.open
        },
    }
})