Obtención de claves al iterar arrays en Vue

A veces, además de los elementos del array, nos gustaría tener acceso también a las claves. Para ello se utiliza la siguiente sintaxis extendida:

App.vue<template>
  <p v-for="(elem, key) in arr">
     {{ key }} {{ elem }}
  </p>
</template>

Con las claves en la salida se pueden hacer varias operaciones. Por ejemplo, hagamos que los números comiencen desde uno:

App.vue<template>
  <p v-for="(elem, key) in arr">
     {{ key + 1 }} {{ elem }}
  </p>
</template>

javascriptdata() {
  return {
    arr: ['x', 'y', 'z'],
  }
}