Как сделать сортировку по цене во vue.js?

Я создаю свои интернет-магазин в котором реализовал уже вывод товаров но как мне сделать так чтобы товары сортировались по цене?Когда пользователь заходит на страницу с товарами у него работает:

created(){
    axios.get('http://localhost:8081/products')
    .then((result) => {
      console.log(result)
      this.products = result.data.products
    }).catch((err) => {
      console.log(err)
    });
  }

А вот когда он вводит числа в input то тогда все начинает реактивно сортироваться.

<div class="Sort">
    <p>От</p><input v-model="min" placeholder="min" type="text">
    <p>До</p><input v-model="max" placeholder="max" type="text">
  </div>

Без нажатий на кнопку а просто как только начал вводить. Вот полный код компонента

<template>
  <div class="main">
    <app-header></app-header>
    <app-menu></app-menu>
    <div class="upper">
    <p>
      New Arrivals
    </p>
    <p>
      <span>home/</span>
      <span>{{this.$route.params.gender}}/</span>
    </p>
  </div>
  <div class="category">
    <ul>
      <li @click="Category('T-shirt')">T-shirt</li>
      <li @click="Category('Bags')">Bags</li>
      <li @click="Category('Polos')">Polos</li>
      <li @click="Category('Shoes')">Shoes</li>
      <li @click="Category('Sweaters')">Sweaters</li>
    </ul>
  </div>
  <div class="Sort">
    <p>От</p><input v-model="min" placeholder="min" type="text">
    <p>До</p><input v-model="max" placeholder="max" type="text">
  </div>
  <div class="content">
    <content-item v-for="product in products"
      :key="product.id"
      v-bind:name="product.name"
      v-bind:price="product.price"
      v-bind:_id="product._id"
      v-bind:srcToProdImage = "'http://localhost:8081/' + product.productImage" ></content-item>
  </div>
  <subscribe></subscribe>
  <app-footer></app-footer>
  </div>
</template>
<script>
import header from './AppHeader';
import Content_item from './Content-item';
import subscribe from './Subscribe';
import appfooter from './Footer';
import Appmenu from './App-Menu';
import axios from 'axios';
export default {
  data () {
    return {
      products:[],
      max:10000,
      min:0,
    }
  },
  components:{
    'app-header': header,
    'content-item': Content_item,
    'subscribe' : subscribe,
    'app-footer' : appfooter,
    'app-menu' : Appmenu
  },
  methods: {
    Category: function(sort) {
      const result = products.filter( product => product.category = sort)
      products = result
    }
  },
  created(){
    axios.get('http://localhost:8081/products')
    .then((result) => {
      console.log(result)
      this.products = result.data.products
    }).catch((err) => {
      console.log(err)
    });
  }
}
</script>
<style lang="scss" scoped>
.upper{
    background-color:#f8f3f4;
    margin-top: 30px;
    p{
      font-family: 'Lato', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 24px;
      color: #f16d7f;
      margin: 0
    }
    p:last-child{
      color: #636363;
      font-size: 14px;
      span:last-child{
        color: #f16d7f
      }
    }
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 35px 0 35px 0px;
    }
  .content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 25px 130px 25px 130px;
  }
  .Sort{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  p{
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  color: #636363;
  font-size: 16px;
  margin-right: 15px;
  }
  input:first-child{
    margin-left: 15px;
  }
  }
  .category{
    ul{
      margin: 0;
      padding: 0;
      li{
        font-family: 'Lato', sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #636363;
      }
    }
  }
</style>