React -> Vue Comparison

import CoreConcept from './CoreConcept.jsx';
import { CORE_CONCEPTS } from '../data.js';

export default function CoreConcepts() {
    return (
        <section id="core-concepts">
            <h2>Core Concepts</h2>
            <ul>
                {CORE_CONCEPTS.map((conceptItem) => (
                    <CoreConcept key={conceptItem.title} {...conceptItem} />
                ))}
            </ul>
        </section>
    );
}

import CoreConcept from './CoreConcept.jsx';
import { CORE_CONCEPTS } from '../data.js';

export default function CoreConcepts() {
    return (
        <section id="core-concepts">
            <h2>Core Concepts</h2>
            <ul>
                {CORE_CONCEPTS.map((conceptItem) => (
                    <CoreConcept key={conceptItem.title} {...conceptItem} />
                ))}
            </ul>
        </section>
    );
}

<template>
  <section id="core-concepts">
    <h2>Core Concepts</h2>
    <ul>
      <CoreConcept
        v-for="concept in CORE_CONCEPTS"
        :key="concept.title"
        v-bind="concept"
      />
    </ul>
  </section>
</template>

<script setup>
import CoreConcept from './CoreConcept.vue'
import { CORE_CONCEPTS } from '../data.js'
</script>

<template>
  <section id="core-concepts">
    <h2>Core Concepts</h2>
    <ul>
      <CoreConcept
        v-for="concept in CORE_CONCEPTS"
        :key="concept.title"
        v-bind="concept"
      />
    </ul>
  </section>
</template>

<script setup>
import CoreConcept from './CoreConcept.vue'
import { CORE_CONCEPTS } from '../data.js'
</script>