How to make i18n work for Galaxy's vue template?

I want to customize the i18n of some galaxy pages, but I have encountered some problems, I hope to get your help.

I want to know how to make i18n work in Galaxy’s vue template. I see that title: _l("Using a Regular Expression") is used in some js files, but I don’t know how to write the i18n syntax of Galaxy’s vue template. For example, in the vue template below, I want to process Regular with i18n. What should I do?

<template>
    <b-modal
        v-model="modalShow"
        :static="modalStatic"
        header-class="no-separator"
        modal-class="ui-modal"
        dialog-class="upload-dialog"
        body-class="upload-dialog-body"
        ref="modal"
        no-enforce-focus
        hide-footer
        :id="id"
    >
        <template v-slot:modal-header>
            <h4 class="title" tabindex="0">{{ title }}</h4>
        </template>
        <b-tabs v-if="ready">
            <b-tab title="Regular" id="regular" button-id="tab-title-link-regular" v-if="showRegular">
                <default :app="this" :lazy-load-max="50" :multiple="multiple" />
            </b-tab>
            <b-tab title="Composite" id="composite" button-id="tab-title-link-composite" v-if="showComposite">
                <composite :app="this" />
            </b-tab>
            <b-tab title="Collection" id="collection" button-id="tab-title-link-collection" v-if="showCollection">
                <collection :app="this" />
            </b-tab>
            <b-tab title="Rule-based" id="rule-based" button-id="tab-title-link-rule-based" v-if="showRules">
                <rules-input :app="this" />
            </b-tab>
        </b-tabs>
        <div v-else>
            <loading-span message="Loading required information from Galaxy server." />
        </div>
    </b-modal>
</template>

Assuming the component has been mounted via the standard mountVueComponent function from utils, then it will have access to the localization plugin. You should have access to a filter called “localize”, and a directive v-localize.

<h4 class="title" tabindex="0">{{ title | localize }}</h4>

or
<h4 class="title" tabindex="0" v-localize>{{ title }}</h4>

Should both work. If they don’t, then your component was not mounted properly by its author, but you can still get those features if you use the mixins from components/plugins/localization.

If you are supplying a value to an attribute and can’t use those in-line methods, then you can use the filter on the attribute itself like this:

<b-tab :title="'Composite' | localize" id="composite" button-id="tab-title-link-composite" v-if="showComposite"></b-tab>

(On a side note, I notice that this sample is taken from the Upload component which is currently being reworked, largely because the subviews mysteriously inject another component inside a component (:app=“this”) which, to my knowledge, is objectively wrong, and definitely problematic.)