A fun way of controlling your styles in javascript, while having CSS execute the animation is to bind a CSS variable to the element, then use that css variable in the elements CSS.
<header :style="`--scrollPercent:${scrollPercent}`" /><style>
header {
opacity: var(--scrollPercent);
}
</style>