Как переиспользовать элементы в Vue.js с помощью key?

Всем доброго времени суток, читал что есть такая штука как key, и что с помощью неё можно переиспользовать элементы страницы, но немного не понял, в каком это плане можно переиспользовать, если и так можно по сути реюзать любую часть, был бы благодарен если бы кто то объяснил или показал на примере)

Да, есть такая штука, оч полезная кстати, с помощью атрибута key можно сказать что это значение будет уникальным и не зависеть ни от каких других полей, вот хороший пример, частично из документации vue.js:


var Vue = new Vue({
el:"#comp-container",
data: {
loginType:'username',
},
methods:{
changeLogType() {
if (this.loginType==='username')
this.loginType="something else"
else
this
.loginType="username"

}
}
})

В первом участке кода мы создаем vue экземпляр, привязываем по id к html разметке, создаем свойство в data loginType, и метод который изменяет значение нашего свойства в data на другое и обратно, далее в html:

<div id="comp-container">
<template
v-if="loginType === 'username'">
Имя пользователя
<input
placeholder="Введите имя пользователя">

<template
v-else>
Email
<input
placeholder="">

<button
@click="changeLogType">Change

При совпадении значения показывается первый блок, в котором надо ввести имя пользователя, а если тип логина не username то показывается второй блок, по кнопке можем изменять тип логина, вся фишка в том что если не дописать тут атрибут key тогда у них будет общее поле, то есть не индивидуальное, а одно на двоих, то есть js в сочетании с верхним блоком будет давать в текстовом поле один результат в placeholder.

<div id="comp-container">
<template
v-if="loginType === 'username'">
Имя пользователя
<input
placeholder="Введите имя пользователя" key="username-input">

<template
v-else>
Email
<input
placeholder="" key="email-input">

<button
@click="changeLogType">Change

А если же дописать атрибут key, так мы их сделаем уникальными, и избежим выделения одного поля для ввода сразу для двух вероятных блоков)