Run a mock round

The Vue components can be created in two different API styles

1. Options API: The Options API uses component logic using an object of options such as data, props,

computed, methods and life cycle methods etc. The properties will be accessible inside functions using
component instance(i.e, this).

1. Composition API: The Composition API uses component logic using imported API functions. The Single File

Components(SFCs) requires setup attribute(<script setup>) to use imported variables and functions directly
inside template section.

You can create functional components by adding functional attribute to template block,

<template functional>
  <div>{{ props.msg }}</div>
</template>

****

Vuex is a state management pattern + library (Flux-inspired Application Architecture) for Vue.js applications. It
serves as a centralized store for all the components in an application, with rules ensuring that the state can only
be mutated in a predictable fashion.

****

Composition functions (commonly called Vue Composables) are functions that leverage Vue's Composition API to encapsulate, manage, and reuse stateful logic across components.

Composables are Vue's architectural equivalent to React Custom Hooks. By convention, their names start with use....

### Practical Composable Example:

// composables/useWindowSize.ts
import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowSize() {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);

  function update() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }

  onMounted(() => window.addEventListener('resize', update));
  onUnmounted(() => window.removeEventListener('resize', update));

  return { width, height };
}

### Using It in Any Component:

<script setup>
import { useWindowSize } from '@/composables/useWindowSize';

const { width, height } = useWindowSize();
</script>

<template>
  <p>Viewport: {{ width }} x {{ height }}</p>
</template>

### Advantages over Mixins:

• Explicit Data Sources: You see exactly where every reactive variable originated.
• No Namespace Collisions: Destructured properties can be renamed easily (const { width: screenWidth } = useWindowSize()).
• Full TypeScript Support: Provides end-to-end type inference.

The scoped css style doesn't impact v-html directive's dynamically generated content. In this case, you can use
deep selectors to solve this styling issue.

****

You can perform testing in two ways,

1. Using vue-cli: It offers pre-configured unit testing and e2e testing setups
2. Manual setup: You can manually setting up unit tests for *.vue files using either mocha-webpack or jest

****

All virtual nodes(VNodes) in the component tree must be unique.i.e, You can't write duplicated nodes in a
straightforward way. If you want to duplicate the same element/component many times then you should use factory
function.

The below render function is invalid where you are trying to duplicate h1 element 3 times,

render: function (createElement) {
  var myHeadingVNode = createElement('h1', 'This is a Virtual Node')
  return createElement('div', [
    myHeadingVNode, myHeadingVNode, myHeadingVNode
  ])
}

You can make duplicates with factory function,

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 3 }).map(function () {
      return createElement('h1', 'This is a Virtual Node')
    })
  )
}

****

v-model on a component is syntactic sugar. In Vue 3, v-model="foo" compiles to passing a modelValue prop and listening for update:modelValue. Inside the child you declare and emit it:

<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
</script>
<input :value="props.modelValue" @input="emit('update:modelValue', $event.target.value)" />

Named models use an argument: v-model:title maps to the title prop and update:title event, so a component can support several two-way bindings. Vue 2 used value and input with an optional model option; Vue 3 removed that in favour of the name.

Modifiers such as v-model.trim are not applied automatically on components. The child receives them through the modelModifiers prop and must implement the behaviour. This pattern is how form libraries wrap native inputs with consistent validation and formatting.

Vue Loader's configuration is a bit different from other loaders by adding Vue Loader's plugin to your webpack
config. The vue loader plugin is required for cloning any other rules(js and css rules) defined and applying them
to the corresponding language blocks(<script> and <style>) in .vue files.

For example, the simple demonistration of webpack configuration for vue loader would be as below,

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files and `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain `.css` files and `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for cloning and mapping them to respective language blocks
    new VueLoaderPlugin()
  ]
}

****