How to properly execute code inside Vue template?

Question

Vue.js

Greetings!
Here is an example code:

<div v-else-if="column.type == 'badge'" :key="value">
                        <v-chip
                            small
                            :style="{
                                'border': '1px solid',
                                'border-color':join('status', 'id', props.value).edge_color||false,
                                'background': join('status', 'id', props.value).badge_color||'#fff',
                                'color': join('status', 'id', props.value).text_color||false
                            }"
                        >{{join('status', 'id', props.value).title||props.value}}</v-chip>
                    </div>

As you can see, here the join method is repeated several times with the same arguments.
How to immediately define an object by calling the method once, so as not to litter in data, computed, props, etc.?

Answer 1

Found only one way: to make your own component.
here in the component, just the transferred object is decomposed into the data necessary for output.