How to create helper functions render vue?

Good evening. Disassemble a sample tutorial from the site React to Vue. Faced with the problem of creating additional functions renderSquare in vue for rendering the component. The same with creating additional variable like status in the render method in React, put the variable in a method. It is customary to do so at all in vue and how do they resolve these situations, thanks in advance!?

React:
class Board extends React.Component {
 renderSquare(i) {
 return (
<Square
value={this.props.squares[i]}
 onClick={() => this.props.onClick(i)}
/>
);
}

 render() {
 const status = 'Next player: X';

 return (
the <div>
 <div className="status">{status}</div>

 <div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
 <div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
 <div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}

Vue:
<template>
the <div>
 <div className="board-row">
 {{ renderSquare(0) }}
 {{ renderSquare(1) }}
 {{ renderSquare(2) }}
</div>
</div>
</template>

the <script>
 import CSSModules from 'vue-css-modules'

 from Square import 'components/Square'
 import styles from './styles.css'

 export default {
 name: 'Board',
 components: {
Square
},
 methods: {
 status() {
 return 'Next player'
},
 renderSquare(i) {
 return ... and then the problems started
},
},

 mixins: [CSSModules(styles)],
}
</script>
April 4th 20 at 00:40
0 answer

Find more questions by tags ReactVue.js