What is the correct way to create vue render helper functions?

Question

React

Good evening. I'm going through an example tutorial from the React website for Vue. Faced the problem of creating an additional renderSquare function in vue to render the component. Same with creating an extra variable like status in the render method in React, put this variable in the method. Is it customary to do this in general in vue and how these situations are solved, 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 (
      <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>
  <div>
    <div className="board-row">
      {{ renderSquare(0) }}
      {{ renderSquare(1) }}
      {{ renderSquare(2) }}
    </div>
  </div>
</template>

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

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

  export default {
    name: 'Board',
    components: {
      Square
    },
    methods: {
      status() {
        return 'Next player'
      },
      renderSquare(i) {
        return ...                           и тут начались проблемы
      },
    },

    mixins: [CSSModules(styles)],
  }
</script>