Custom JS method inside add_slot() template throws TypeError

[defkev]

Description

Dunno if this even is a bug, or I am just thinking about this wrong, as I usually try to avoid vue.js where possible.
But I assume this has something to do with templates having no access to the global scope?

Take the following minimal example:

from nicegui import ui

ui.add_head_html('''
    <script type="text/javascript">
        const fmtpct = (p) => {
            return Intl.NumberFormat('en-US', {
                style: 'percent'
            }).format(p / 100);
        }
    </script>
''')

tree = ui.tree([
    {'id': 'numbers', 'children': [{'id': '1', 'pct': 100}, {'id': '2', 'pct': 20}]},
    {'id': 'letters', 'children': [{'id': 'A', 'pct': 44}, {'id': 'B', 'pct': 0}]},
], label_key='id', on_select=lambda e: ui.notify(e.value)).props('dense').expand()
tree.add_slot('default-body', '''
    <span :props="props">{{ fmtpct(props.node.pct) }}</span>
''')

ui.run()

Throws:

TypeError: (intermediate value).fmtpct is not a function

but:

...
tree.add_slot('default-body', '''
    <span :props="props">{{ Intl.NumberFormat('en-US', { style: 'percent' }).format(props.node.pct / 100) }}</span>
''')

doesn't

EDIT:
After loading the dev version of Vue using ui.run(prod_js = False) I am seeing an expected exception:

[Vue warn]: Property "fmtpct" was accessed during render but is not defined on instance.

Which leaves me to believe that I need to export my method to use it in the component like:

export default {
    methods: {
        fmtpct = (p) => {
            return Intl.NumberFormat('en-US', {
                style: 'percent'
            }).format(p / 100)
        }
    }
}

But how do I import this in add_slot()???