img-api | Image Manipulation API server written in GoLang | Chat library

EDIT/NEW ANSWER:

I was finally able to get this to work... Here is what I had to do to fix it:

• ~EDIT~ adding $nextTick (as OP suggested) makes this a lot more consistent! OP was able to get this working sans a wrapper component as well
• The small-cards component now emits an event when the image is done loading
• Created a "wrapper" for the small-cards component called small-cards-wrapper
• This "wrapper" has 2 props: 1) items, an array of image sources 2) scrollToIndex, the index number you would like to scroll to at mount
• The small-cards-wrapper component will pick up on the emitted event (from small-cards component[s]) and check to see if it is the index you want to scroll to - if it is, we scroll to it..
• Essentially, we wait for the image to load before trying to scroll to it..

I'm sure you will be able to see what I changed after reviewing the code, but if you have any questions just let me know!

[NEWEST JSFiddle (with $nextTick)]

[UPDATED JSFiddle]

ORIGINAL ANSWER:

I triggered the scrollToCenter() method during mount, as well as removed the hook.mounted logic from the template..

I have commented the above changes that were made within the code so you can see exactly what I did..

If you do not want the scroll to occur 2 seconds from mount, you can remove the setTimeout - this was done to show how it scrolls after loading (gives you time to see it happen)..

Is this what you are looking for?