Why do developers use frameworks instead of vanilla JavaScript for web apps?

Frameworks cut out repetitive manual DOM manipulation by providing reactive data binding that syncs data and view automatically.

Vanilla JavaScript requires:

const input = document.getElementById('input');
const element = document.getElementById('output');
// Manual update
element.innerText = input.value;

With Vue.js:

<input v-model="name">
<!-- Automatic update -->
<p>{{ name }}</p>

The framework handles synchronizing data and DOM, reducing bugs and boilerplate code.