VueJs: Multiple components on one view with different value - vue.js

Question

I am a beginner in VueJs. I want to show the same component multiple times on one view. So I added this code:
<StarRatingReadonly :rating="i" v-for="i in 5" :key="i"></StarRatingReadonly>
My StarRating-Script component looks like this:
https://jsfiddle.net/s3dbfhr9/2/
There should always be 5 stars. And depending on the rating it should contains as many green stars. Example: If rating is three, there has to be three green stars and two grey ones.
But the value is just showed once.

Answer 1

The reason is simple: radio inputs are meant to chose a single value among multiple choices. It means that within a fieldset, only one radio can be checked at the time.
It's clearer if you remove your .rate > input { display: none; }, you'll see you have only one radio checked.
Solution
Just use checkbox instead of radio. They do the same except that multiple checkboxes can be selected at the same time.
Also, you should update your :checked="" conditions so that it's checked if the rating is actually greater than or equal to the input value:
<fieldset class="rate">
<input
type="checkbox"
name="rating"
:checked="rating >= 5"
><label for="rating10" title="5 stars"></label>
<input
type="checkbox"
name="rating"
value="4.5"
:checked="rating >= 4.5"
><label class="half" for="rating9" title="4 1/2 stars"></label>
<input
type="checkbox"
name="rating"
value="4"
:checked="rating >= 4"
><label for="rating8" title="4 stars"></label>
<input
type="checkbox"
name="rating"
value="3.5"
:checked="rating >= 3.5"
><label class="half" for="rating7" title="3 1/2 stars"></label>
<input
type="checkbox"
name="rating"
value="3"
:checked="rating >= 3"
><label for="rating5" title="3 stars"></label>
<input
type="checkbox"
name="rating"
value="2.5"
:checked="rating >= 2.5"
><label class="half" for="rating4" title="2 1/2 stars"></label>
<input
type="checkbox"
name="rating"
:checked="rating >= 2"
><label for="rating3" title="2 stars"></label>
<input
type="checkbox"
name="rating"
:checked="rating >= 1.5"
><label class="half" for="rating2" title="1 1/2 star"></label>
<input
type="checkbox"
name="rating"
:checked="rating >= 1"
><label for="rating1" title="1 star"></label>
</fieldset>
Working fork of your jsfiddle: https://jsfiddle.net/Kapcash/vzwpc5br/
Note: you could use a v-for inside your rating component to render your inputs and simplify the template.

Answer 2

As you added :checked="ratingValue == 1", It will always checked the radio input which verify this condition.
As I don't have your full child template code. Right now it is just showing simple radio inputs.
Demo :
Vue.component('StarRatingReadonly', {
props: ['rating'],
template: `<input
type="radio"
id="rating1"
name="rating"
:checked="rating === 1"
>`
});
var app = new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<star-rating-readonly v-for="i in 5" :key="i" :rating="i"></star-rating-readonly>
</div>
Can you please check above code snippet and complete the remaining code you have. So that I can look into the requirement/issue you are facing.