Mostrar y ocultar dependiendo del tamaño del código

<div id="wrapper">
    <div id="products-content">
        <div class="columns">
            <aside class="column is-12-mobile is-3-desktop box-sidebar">
                <div v-if="mobileShowSearch" class="inner-search">
                    <h3>Buscador</h3>
                    <button class="search-button button" @click="show()">
                        <i class="fas fa-search"></i>
                        Cambiar
                    </button>
                </div>
                <div v-if="formSidebar" class="form-sidebar">
                    <h3>Buscador</h3>
                    <form class="search-sidebar-form">
                        <div class="field">
                            <label class="label">Vehículos</label>
                            <div class="select">
                                <select v-model="carType">
                                    <option value="Carro">Carro</option>
                                    <option value="Motor">Motor</option>
                                    <option value="Barco">Barco</option>
                                </select>
                            </div>
                        </div>
                        <div v-if="carType === 'Carro'">
                            <div class="field">
                                <label class="label">Tipo de Vehículo</label>
                                <div class="select">
                                    <select>
                                        <option>Todos</option>
                                        <option>Sedan</option>
                                        <option>Suv</option>
                                        <option>Coupe</option>
                                        <option>Minivan</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Marca</label>
                                <div class="select">
                                    <select>
                                        <option>Todas las Marcas</option>
                                        <option>Marca 1</option>
                                        <option>Marca 2</option>
                                        <option>Marca 3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Modelo</label>
                                <div class="select">
                                    <select>
                                        <option>Todas los modelos</option>
                                        <option>Modelo 1</option>
                                        <option>Modelo 2</option>
                                        <option>Modelo 3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Provincias</label>
                                <div class="select">
                                    <select>
                                        <option>Todas las Provincias</option>
                                        <option>La Altagracia</option>
                                        <option>La Romana</option>
                                        <option>El Seibo</option>
                                        <option>Hato Mayor</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field mid-field">
                                <label class="label">Condición</label>
                                <div class="select">
                                    <select>
                                        <option>Todas</option>
                                        <option>Nuevo</option>
                                        <option>Usado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field mid-field">
                                <label class="label">Estado</label>
                                <div class="select">
                                    <select>
                                        <option>Cualquiera</option>
                                        <option>En Venta</option>
                                        <option>En Renta</option>
                                        <option>Venta y/o Alquiler</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Provincias</label>
                                <div class="select">
                                    <select>
                                        <option>Todas las Provincias</option>
                                        <option>La Altagracia</option>
                                        <option>La Romana</option>
                                        <option>El Seibo</option>
                                        <option>Hato Mayor</option>
                                    </select>
                                </div>
                            </div>
                            <a class="advanced-search button is-primary outline" @click="advancedSearchShow()">
                                <i class="fas fa-plus"></i>
                                Busqueda Avanzada
                            </a>
                            <div v-if="advancedSearch" class="box-advanced-search">
                                <div class="field">
                                    <label class="label">Combustible</label>
                                    <div class="select">
                                        <select>
                                            <option>Todos</option>
                                            <option>Gasolina</option>
                                            <option>Gas</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="label">Transmisión</label>
                                    <div class="select">
                                        <select>
                                            <option>Todas</option>
                                            <option>La Altagracia</option>
                                            <option>La Romana</option>
                                            <option>El Seibo</option>
                                            <option>Hato Mayor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="label">Tracción</label>
                                    <div class="select">
                                        <select>
                                            <option>Todas</option>
                                            <option>Delantera</option>
                                            <option>Trasera</option>
                                            <option>La Romana</option>
                                            <option>Hato Mayor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="label">Vendedor</label>
                                    <div class="select">
                                        <select>
                                            <option>Todas las Provincias</option>
                                            <option>La Altagracia</option>
                                            <option>La Romana</option>
                                            <option>El Seibo</option>
                                            <option>Hato Mayor</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="carType === 'Motor'">
                            <div class="field">
                                <label class="label">Tipo de Motor</label>
                                <div class="select">
                                    <select>
                                        <option>Todos</option>
                                        <option>FourWheel</option>
                                        <option>Motor</option>
                                        <option>Pasola</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Marca</label>
                                <div class="select">
                                    <select>
                                        <option>Yamaha</option>
                                        <option>Suzuki</option>
                                        <option>PGO</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Modelo</label>
                                <div class="select">
                                    <select>
                                        <option>Modelo 1</option>
                                        <option>Modelo 2</option>
                                        <option>Modelo 3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Condición</label>
                                <div class="select">
                                    <select>
                                        <option>Todas</option>
                                        <option>Nuevo</option>
                                        <option>Usado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Provincias</label>
                                <div class="select">
                                    <select>
                                        <option>Todas las Provincias</option>
                                        <option>La Altagracia</option>
                                        <option>La Romana</option>
                                        <option>El Seibo</option>
                                        <option>Hato Mayor</option>
                                    </select>
                                </div>
                            </div>
                            <a class="advanced-search button is-primary outline" @click="advancedSearchShow()">
                                <i class="fas fa-plus"></i>
                                Busqueda Avanzada
                            </a>
                            <div v-if="advancedSearch" class="box-advanced-search">
                                <div class="field">
                                    <label class="label">Motor CC</label>
                                    <div class="select">
                                        <select>
                                            <option>50 CC</option>
                                            <option>70 CC</option>
                                            <option>90 CC</option>
                                            <option>100 CC</option>
                                            <option>110 CC</option>
                                            <option>125 CC</option>
                                            <option>150 CC</option>
                                            <option>200 CC</option>
                                            <option>250 CC</option>
                                            <option>300 CC</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="label">Vendedor</label>
                                    <div class="select">
                                        <select>
                                            <option>Todas las Provincias</option>
                                            <option>La Altagracia</option>
                                            <option>La Romana</option>
                                            <option>El Seibo</option>
                                            <option>Hato Mayor</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="carType === 'Barco'">
                            <div class="field">
                                <label class="label">Marca</label>
                                <div class="select">
                                    <select>
                                        <option>Marca 1</option>
                                        <option>Marca 2</option>
                                        <option>Marca 3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Eslora</label>
                                <div class="control">
                                    <input class="input" type="number" placeholder="1 M">
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Modelo</label>
                                <div class="select">
                                    <select>
                                        <option>Modelo 1</option>
                                        <option>Modelo 2</option>
                                        <option>Modelo 3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label">Provincias</label>
                                <div class="select">
                                    <select>
                                        <option>Todas las Provincias</option>
                                        <option>La Altagracia</option>
                                        <option>La Romana</option>
                                        <option>El Seibo</option>
                                        <option>Hato Mayor</option>
                                    </select>
                                </div>
                            </div>
                            <a class="advanced-search button is-primary outline" @click="advancedSearchShow()">
                                <i class="fas fa-plus"></i>
                                Busqueda Avanzada
                            </a>
                            <div v-if="advancedSearch" class="box-advanced-search">
                                <div class="field">
                                    <label class="label">Combustible</label>
                                    <div class="select">
                                        <select>
                                            <option>Todas las Provincias</option>
                                            <option>La Altagracia</option>
                                            <option>La Romana</option>
                                            <option>El Seibo</option>
                                            <option>Hato Mayor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="label">Vendedor</label>
                                    <div class="select">
                                        <select>
                                            <option>Todas las Provincias</option>
                                            <option>La Altagracia</option>
                                            <option>La Romana</option>
                                            <option>El Seibo</option>
                                            <option>Hato Mayor</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field text-right">
                            <button class="button is-primary">Buscar</button>
                        </div>
                    </form>
                </div>
                <div class="change-role">
                    <h4>¿Eres propietario de una empresa?</h4>
                    <p>Regístrala gratis y haz que tu marca e inventario lleguen mas lejos y a mas personas de una forma rápida, segura y sencilla.</p>
                    <a href="/pages/sale.html" class="button is-second">Registrarme</a>
                </div>
            </aside>
            <div class="column box-content">
                <div class="filter-content">
                    <form action="" class="filter-form">
                        <div class="radio-group">
                            <div class="radio-inner">
                                <label for="grid">
                                    <input class="radio-control" type="radio" v-model="gridOrList" id="grid" name="view" value="Grid View" checked>
                                    <span><i class="fas fa-th-large"></i></span>
                                </label>
                            </div>
                            <div class="radio-inner">
                                <label for="list">
                                    <input class="radio-control" type="radio" v-model="gridOrList" id="list" name="view" value="List View">
                                    <span><i class="fas fa-th-list"></i></span>
                                </label>
                            </div>
                        </div>
                        <div class="select">
                            <label for="">Ordernar por: &nbsp;</label>
                            <select name="select-view" class="select-view" id="">
                                <option value="Default">Por Defecto</option>
                                <option value="A to Z">A a Z</option>
                                <option value="Z to A">Z a A</option>
                            </select>
                        </div>
                    </form>
                </div>
                <hr>
                <div class="products-content" :class="gridOrList2">
                    <% @cars.each do |car| %>
                      <a href="<%= listing_path(car) %>" class="prod-link">
                            <article class="car-prod">

                                <div class="img-prod">
                                    <%= image_tag listing_cover(car) %>
                                </div>
                                <div class="content-info">

                                    <h4 class="prod-title"><%= car.title %></h4>
                                    <div class="prod-status">
                                        <p>2020 / Nuevo / Diesel</p>
                                    </div>
                                    <p class="price">
                                        <span>Venta</span> RD$ 350,000
                                    </p>
                                    <p v-if="listView">Vendedor: Persona</p>
                                    <p v-if="listView"> Provincia: <%= car.user.province ? "#{car.user.province}" : "No agregada." %></p>
                                </div>
                            </article>
                        </a>
                    <% end %>
                </div>
                <div class="pagination-content">
                    <ul class="pagination-list inner-pagination">
                        <li>
                            <a href="#" class="pagination-previous">
                                <i class="fas fa-chevron-left"></i>&#160;Anterior
                            </a>
                        </li>
                        <li>
                            <a href="#" class="pagination-link active">1</a>
                        </li>
                        <li>
                            <a href="#" class="pagination-link">2</a>
                        </li>
                        <li>
                            <a href="#" class="pagination-link">4</a>
                        </li>
                        <li>
                            <a href="#" class="pagination-link">3</a>
                        </li>
                        <li>
                            <a href="#" class="pagination-link">5</a>
                        </li>
                        <li>
                            <a href="#" class="pagination-next">
                                Siguiuiente&#160;<i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

const product = new Vue({
    el: '#products-content',
    data: {
        gridOrList: 'Grid View',
        view: false,
        carType: 'Carro',
        advancedSearch: false,
        windowWidth: window.innerWidth,
        formSidebar: true
    },
    mounted() {
        window.onresize = () => {
            this.windowWidth = window.innerWidth
         }
    },
    computed: {
        gridOrList2 () { 
            return this.gridOrList === "List View" ? "list-view" : "grid-view"
        },
        listView() {
            if (this.gridOrList === "List View") {
                return true
            }
        },
        mobileShowSearch() {
            return this.windowWidth <= 767
        },
        algoSeOculta() {
            if (this.windowWidth <= 767)
                return this.formSidebar = false
            else
                return this.formSidebar = true
        }

    },
    methods: {
        advancedSearchShow() {
            this.advancedSearch = !this.advancedSearch
        },
        show() {
            this.formSidebar = !this.formSidebar
        }
    }
})

HablemosDeVueJS / doctor-vue

Mostrar y ocultar dependiendo del tamaño del código #10