JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <div class="values">
    <div v-for="n in 11">{{ n + 29 }}</div>
  </div>
  <div class="values">
    <div v-for="n in 40" v-if="n >= 30">{{ n }}</div>
  </div>
  <div class="values">
    <div v-for="n in values">{{ n }}</div>
  </div>
  <div class="values">
    <div v-for="n in getValues(30, 40)">{{ n }}</div>
  </div>
</div>

CSS

.values {
  font-family: monospace;
  display: inline-block;
  border: 1px solid silver;
  margin: 10px;
  padding: 10px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    values: [...Array(11)].map((n, i) => i + 30),
  },
  methods: {
    getValues(lower, upper) {
      return [...Array(upper - lower + 1)].map((n, i) => lower + i);
    },
  },
});