[Coriolan161]

cubano,
ты про что? какие исходники?

Если я правильно понял, то тебе непонятно:
в верстке есть:

<ul>
        		<li v-for="i in products | searchFor searchString | filterBy selectedCategory in 'category'">
            		<img v-bind:src="i.image" />
            		<p>{{i.product}}</p>
            		<p>£{{i.price}}
            			<select v-model="quantity[i.id].quantity" number>
            				<option selected>1</option>
            				<option>2</option>
            				<option>3</option>
            				<option>4</option>
            				<option>5</option>
            			</select>
            			<button id="GPU" class="categories" @click="addToCart(i.id)">Add To Cart</button>
            		</p>
        		</li>
    		</ul>

тут типа один <li>...
а когда открываешь просмотр DOM, то там дофига <li></li> ?

Короче: когда используешь v-for (или в ангуляре ng-repeat) он связывает каждый элемент коллекции (products) с html-шаблоном (выше смотри) и запихивает это все в DOM дерево через DocumentFragment.
Сколько у тебя продуктов столько у тебя и будет элементов списка (ну в зависимости от того куда повесить v-for)