Because writing code declaratively it's much more readable than imperatively.

<h1>{name}</h1>

clearly state that you want name inside h1, it's colocated and faster to write than

const h1=document.querySelector("h1"); h1.innerText=name;

As for why we need $ or reactive is because JavaScript does not comes with a way to express reactivity. In the case of svelte this means having to come up with a syntax for the compiled language, for Vue means that you need to wrap your normal object in a proxy to let Vue know when you are accessing or setting a variable.