As mentioned in #1470, we currently make use of CSS rules to hide elements when the screen is at different widths. The issue with this is that it means that all elements are loaded when the page starts up, but are then hidden and shown as the screen is resized. Since users are less likely to change their screen size, it makes more sense to use v-if conditional rendering to prevent elements being loaded at all depending on the size of the screen to reduce the initial page load.
This MR adds the width listener to pass to elements as a prop to be used in conditional rendering.