vue List Rendering: change value of string before “v-for”

I am trying to replace a certain string with a condition before it gets to the output.

Below is my code

<script setup>
import { ref } from 'vue'

const items = ref([{ letter: "A", message: '1' }, { letter: "B", message: '2' }])
</script>

<template>
    <li v-for="(item, index) in items">
        <p v-if="item.message === '1'">
            {{ item.letter }} - {{ 'Apple' }}
        </p>
        <p v-if="item.message === '2'">
            {{ item.letter }} - {{ 'Banana' }}
        </p>
    </li>
</template>

I tried adding the v-if inside the v-for but this seems impractical. I am trying to figure out a way to have item.message replace its string value before v-for. Any suggestions?