Define populate virtuals on document arrays on the document array, not top-level document

Re: https://github.com/Automattic/mongoose/issues/8198 , it looks like if you do:

```javascript
const FooSchema = new Schema({
name: String,
children: [{
barId: { type: Schema.Types.ObjectId, ref: 'Bar' },
quantity: Number,
}],
}, {
toJSON: { virtuals: true },
toObject: { virtuals: true },
});
FooSchema.virtual('children.bar', {
ref: 'Bar',
localField: 'children.barId',
foreignField: '_id',
justOne: true,
});
```

`children.bar` is a top-level virtual and populated virtuals live on the top-level document, leading to weird issues if you access the virtual using `children[0].bar` as opposed to `get('children.0.bar')`.

Start by reproducing the schema and virtual shown in the issue, then compare accessing the populated value through children[0].bar and get('children.0.bar'). Done means the virtual is defined and populated on each document-array element rather than only on the top-level document.

Written by the indexing model from the issue text.