Vue Composition API: Computed and Ref Properties Explained

Hey lovely readers, If you are working with Vue 3 and TypeScript, you have probably seen ref and computed many times. They appear in tutorials, real projects, and even job interviews. When I first started using Vue 3, I kept wondering why everything had to be wrapped in ref , and what made computed different from a normal function. I would consider myself more of a backend developer, and I spent a lot of time in 2025 trying to wrap my head around frontend development. So if you are using Vue 3 with TypeScript now, or planning to start learning Vue, this guide will help you clearly understand these two important concepts. What is state? Before we talk about ref and computed , we need to understand one important concept: state. State is simply data that can change over time and affects what the user sees on the screen. If the data changes and the UI must update because of it, that data is state. Examples of state in a frontend application include a counter value, a list of users fetched