vue binding value based on media query

You could try binding the display value to a component property:

<carousel-3d :display="display">

...and then update that property on window resize:

...

data() {
  return {
    display: 3
  }
},

methods: {
  onResize() {
    if (window.innerWidth > 960) {
      this.display = 5
    } else {
      this.display = 3
    }
  }
},

created() {
  window.addEventListener('resize', this.onResize)
},

beforeDestroy() {
  window.removeEventListener('resize', this.onResize)
},

...

I struggled to find any solutions with Vuejs alone myself or if at all that are there, are already too complex. Involves a lot of unnecessary work where things can be done neatly and in CSS.

That solution is styled components or for a matter of fact any CSS in JS solutions to handle such things with ease.

For example in styled components your styles are written inside ES6 template literal.

import styled from 'styled-components';
import breakpoint from '../utils/breakpoint.js';

const YourStyledComponent = styled.div`
    width: calc(100% - 30px);
    @media (min-width: ${breakpoint.SM}px) {
        // Your media styles
    }
`;

Then inside your Vue component use it as a normal component. You can pass it props as well. Do read more about it - Vue-styled-components.

Doing this way you are using just CSS for styling everything. It's a must for front-end development considering the performance. I think it's a long time since we stopped adding eventListeners to Javascript related to styling or handling layout.