Vue.js Assignment– 2

Composition API Mastery

Basic Questions

  1. Create a component that uses setup() to return a greeting string and render it.
  2. Use ref() to build a click counter and display the current count.
  3. Use reactive() to manage a user object with name and email and render both.
  4. Create a computed() property that returns the uppercase version of a ref string.
  5. Use watch() to log changes to a ref counter whenever it updates.
  6. Build a form with reactive() state and bind inputs with v-model.
  7. Create a computed() that derives a full name from firstName and lastName refs.
  8. Watch a reactive() object’s specific field using a getter in watch().
  9. Implement onMounted() to fetch mock data (setTimeout) and render it.
  10. Use onUnmounted() to clean up a timer created in setup().
  11. Add onBeforeUpdate() to log when the component is about to re-render.
  12. Create a child component that accepts a prop and renders it using Composition API.
  13. Build a parent that passes a prop and updates it to see reactive re-renders.
  14. Use provide() in a parent to share a ref theme value.
  15. Use inject() in a child to read and display the shared theme.
  16. Create a minimal composable useCounter() that returns count and inc().
  17. Use useCounter() in a component and show that multiple instances are independent.
  18. Convert a small Options API component (data/methods) to Composition API.
  19. Add a computed() that depends on another computed() and verify re-computation.
  20. Use toRefs() on a reactive() object and bind fields to inputs without losing reactivity.

Intermediate Questions

  1. Create a useForm() composable that manages form state, validation, and reset.
  2. Build a component that uses watchEffect() to auto-run logic when dependencies change.
  3. Use shallowRef() to hold a large non-reactive object and show update behavior.
  4. Demonstrate readonly() by exposing a read-only version of reactive state to children.
  5. Use watch() with { immediate: true } to run a side effect on initial render.
  6. Implement debounced search inside setup() using customRef() for input.
  7. Add onBeforeMount() and onUpdated() hooks and log their call order.
  8. Create a tree of components using provide/inject to pass a settings object two levels deep.
  9. Write a useFetch(url) composable that returns { data, loading, error, reload } with abort support.
  10. Create a useInterval(ms) composable that starts/stops a timer with onMounted/onUnmounted.
  11. Build a tab UI that stores active tab in a ref; derive classes via computed().
  12. Use reactive() with nested objects and a deep watch() to persist state to localStorage.
  13. Implement onErrorCaptured() in a parent to catch a child’s rendering error.
  14. Migrate a medium Options API component (props, data, computed, methods, watch) to Composition API.
  15. Replace mixins in an existing component with a composable and prove no name collisions.
  16. Use provide() to expose a toggleTheme() function and call it from multiple children via inject().
  17. Build a usePagination() composable returning page, pageCount, next, prev, setPage.
  18. Optimize a list by memoizing expensive formatting inside computed() with primitive refs as deps.
  19. Create a component that conditionally uses watchPostEffect() vs watchEffect() and show the difference.
  20. Extract async form submission logic into a composable and reuse it in two components.

Advanced Questions

  1. Implement a useWebSocket(url) composable that manages connect/reconnect, exposes send() and reactive messages, and cleans up on unmount.
  2. Build a small app with two pages that share global reactive state via provide/inject without a store; include persistence on unload.
  3. Create a useField() composable (value, touched, errors, validators) and compose multiple fields into a useForm() for complex validation.
  4. Implement effectScope() to group multiple watchers/effects and dispose them together on route change.
  5. Build a performance benchmark comparing Options API vs Composition API with heavy computed chains and measure renders.
  6. Migrate a component that used two mixins to a single composable-based solution; remove naming conflicts and demonstrate improved types.
  7. Create a plugin that auto-registers a global custom directive and exposes a provide() API for default options.
  8. Implement a useAsyncQueue() composable that queues async tasks, exposes status, supports cancelation, and integrates with lifecycle hooks.
  9. Build a dashboard that uses multiple composables (useFetch, useInterval, usePagination) and prove reactivity isolation between widgets.
  10. Final Hands-on Project:
    • Take a medium Options API feature (filters + table + detail modal)
    • Migrate to Composition API with composables (useTable, useFilters, useModal)
    • Share state via provide/inject where appropriate
    • Add lifecycle hooks for data loading and cleanup
    • Optimize with computed, watchEffect, and shallowRef for large payloads
    • Document architecture, tradeoffs, and performance gains.