Fragment with Keyed Elements

Show how to provide a 'key' to elements within a fragment for proper reactivity and state updates in Vue.js.
// In Vue.js 3.x, you can provide keys to elements within fragments using the <template> tag.

  <div id="keyed-fragments">
    <template v-for="item in items" :key="">
      <!-- Use the item's unique id as the key -->
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>

export default {
  data() {
    return {
      // Sample array of items, each with a unique ID
      items: [
        { id: 1, title: 'Item 1', description: 'Description for item 1' },
        { id: 2, title: 'Item 2', description: 'Description for item 2' },
        // more items...
This code snippet is a Vue.js component using a fragment (the <template> tag with v-for directive) to render a list of items. Each child element within the fragment is given a unique 'key' attribute using the item's 'id', which is necessary for Vue.js to keep track of each element's identity for efficient re-rendering.