Remove direct DOM manipulation from Vue codebase wherever possible

[Keavon]

Currently in a lot of places, we are directly modifying the DOM by setting inline styles or other values directly on elements, often using either their refs or querySelector()/closest(). This is bad practice and we want to set data values on the Vue components instead, then bind their styles or other attributes in the Vue HTML template. Except in rare cases, we shouldn't need to directly manipulate the DOM.