How does VUE loop through two arrays at the same time?

now you can only display the name of the child component. I want to loop out the data of the parent component"s arr2 array and put it behind the name, that is, zhangsan corresponds to 43 lisi and 55, so how can these two arrays be looped out at the same time? The structure of this parent-child component cannot be changed. Thank you

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script src="vue.js"></script>
   <script type="text/javascript">
      window.onload=function(){
         var contents={
             template:"-sharpcontents",
             props:["age"],
             data(){
                  return {
                     arr:[
                        {name:"zhangsan"},
                        {name:"lisi"},
                        {name:"wangwu"},
                     ]
                  }
             },
         }
         new Vue({
               el:"-sharpdiv1",
               data:{
                arr2:[43,55,20],
               },
               components:{
                  "contents":contents
               },
               
         })
      }
   </script>
</head>
<body>
<template id="contents">
   <div>
        <ul>
          <li v-for="(item,index) in arr">{{item.name}}{{arr2 }}</li>
        </ul>
   </div>
</template>

<div id="div1">
    <contents :age="arr2"></contents>
</div>
</body>
</html>
Mar.26,2021

      <li v-for="(item,index) in arr">{{item.name}}{{age[index]}}</li>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e444fe-650bd.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e444fe-650bd.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?